4

I am searching for a cross-browser video solution able to display local video using a local HTML file, with local subtitles (.srt files). I have tried different players (VideoJS, jwPlayer, HTML5 native with jquery.srt, etc.). All works fine when hosted online but none seems to work properly when local.

Unfortunately I can't install any web server or use third party extension.

Anyone have already solved this ?

HTML5 using the track tag with .vtt files (or .srt files with jquery.srt) : Works perfectly with IE10+ but not with Chrome 40+ (same comment here Viewing HTML5 video with captions offline)

<video controls preload="none" width="800" height="600" poster="test.jpg">
<source src="test.mp4" type='video/mp4' />
<track kind="subtitles" src="test_EN.vtt" srclang="en" label="English"></track>
<track kind="subtitles" src="test_FR.vtt" srclang="fr" label="French"></track>
</video>

jwPlayer v6 doesn't work offline, you get this message : "Offline playback not supported". After few search you can make the video work by using the jwPlayer v5 .swf file but... subtitles will not work.

<script type="text/javascript" src="jwplayer.js"></script>
<div id="oplayer">Loading the player...</div>
<script type="text/javascript">
jwplayer("oplayer").setup({file:"test.mp4",  
  image:"test.jpg",width:800,height:600,top:10,left:10,autostart:false,
  tracks:[{file:"test_FR.srt",label:"FR",kind:"captions","default":true},
  {file:"test_EN.srt",label:"EN",kind:"captions","default":true}]});  
</script>

videoJS is also using HTML5 so, same behavior.

NB :
If you want to bypass the local issue with Chrome, you can launch the browser from the command line window with the additional argument ‘–allow-file-access-from-files’

src: http://www.chrome-allow-file-access-from-file.com/

Community
  • 1
  • 1
PAB
  • 41
  • 1
  • 4
  • Rather than looking for a different solution perhaps you should be looking to fix one of your earlier attempts. What errors were you getting? – glend Jun 11 '15 at 10:46
  • Thanks for your answer, I have added more infos. – PAB Jun 11 '15 at 13:19
  • Does it have to be cross operating system compatible? Maybe there is a non-html solution? How many videos need to be played? – glend Jun 11 '15 at 13:34
  • Actually the videos are embeded inside a html project, so, it can't be a non-html solution. Perhaps I have to find a way to grab the subs and put them inside the html file. I can't understand why Chrome does not run local subtitles files (and IE does !) – PAB Jun 11 '15 at 14:04
  • Its an exploit in IE, it shouldn't work. What do you mean by "embedded inside a HTML project"? HTML projects are just files in a file system, there's absolutely no reason why someone couldn't just double click on one of the videos. – glend Jun 11 '15 at 14:18
  • Videos are embeded into a html "slideshow", users can interact with other links inside this project. Yes, you are right, users have access to the folders and are therefore able to launch the files but the purpose is to stay inside this project and not to use any file manager ;) – PAB Jun 11 '15 at 14:21
  • How about hard coding subtitles into the video? – glend Jun 11 '15 at 14:27
  • Videos are using subtitles in different languages. Meaning for 1 video you can have 3 or more .srt files. – PAB Jun 11 '15 at 14:32
  • That doesn't have to be an obstacle, 3 videos, 3 webpages. – glend Jun 11 '15 at 14:35
  • Yes indeed, but this will multiply the video files by 3 or 4 and they are many. I need to keep the whole project as light as I can. Thanks anyway ;) – PAB Jun 11 '15 at 14:44

3 Answers3

4
  1. Convert the .vtt file to base64
  2. Save the resulting base64 string in your html file
  3. Decode the base64 string
  4. Create a new blob using the decoded string as input
  5. Create a new url using the new blob as input
  6. Set the source of your text track to the new url

var subtitle = "V0VCVlRUDQoNCjENCjAwOjAwOjI4Ljg5NSAtLT4g...";
subtitle = window.atob(subtitle);
var subBlob = new Blob([subtitle]);
var subURL = URL.createObjectURL(subBlob);

document.getElementById("subtitle").setAttribute("src", subURL);
<video controls>
  <source type="video/mp4" src="videoFile.mp4">
  <track id="subtitle" kind="subtitles" srclang="en" label="English">
</video>
Thor
  • 198
  • 1
  • 8
  • 1
    Tried this in chrome and firefox with no luck. I can see the source attribute is set correctly in the inspector, the request for the blob actually succeeds, and I can even open it successfully, but the captions just don't display when I play the video for some reason (even after I remembered to enable them with the video controls :)) – Rob Allsopp May 27 '19 at 19:26
  • Did you make your base64 string from a vtt file or from and srt file? The subtitle file needs to be vtt formatted prior to conversion. – Thor Jun 01 '19 at 01:25
  • I actually DID get this to work, sorry! I made the vtt file programatically and had an invalid header. Thanks for answer! – Rob Allsopp Jun 01 '19 at 21:51
  • If anyone is curious, this method also works in react if you simply pass the url generated by `URL.createObjectURL(subBlob)` to the `src` attribute of your track in the usual react style: `` – Rob Allsopp Jun 01 '19 at 21:54
3

You can always use base64 for src attributes:

<track  kind="subtitles" src="data:image/png;base64, V0VCVlRUCgogICAgICAxCiAgICAgIDAwOjAwOjAyLjUwMCAtLT4gMDA6MDA6MDUuMjUwCiAgICAgIEluc3RlYWQgb2YgbG9hZGluZyBhbiBleHRlcm5hbCAudnR0IGZpbGUsCiAgICAgIAogICAgICAyCiAgICAgIDAwOjAwOjA1LjI1MCAtLT4gMDA6MDA6MDkuNzUwCiAgICAgIFRoZSB3b3JrYXJvdW5kIGlzIHRvIGVtYmVkIGl0IGluc2lkZSBhIHNjcmlwdCB0YWcsCiAgICAgIAogICAgICAzCiAgICAgIDAwOjAwOjEwLjAwMSAtLT4gMDA6MDA6MTUuMDAwCiAgICAgIEFuZCB0aGVuIHBhcnNlIGl0IHVzaW5nIEphdmFTY3JpcHQKICAgICAgYW5kIGR5bmFtaWNhbGx5IGFkZCBpdCBhcyBhIG5ldyBUZXh0VHJhY2su" label="English">
Zelid
  • 6,905
  • 11
  • 52
  • 76
0

You can use any static web server (static-server - npm, http.server - python) to serve the local files, track will automatically pickup srt/vtt files as they are linked in HTML src.
Eg: python3 -m http.server 8000 will trigger static file web server and visit http://localhost:8000/ to access index.html just like it's served from a webserver.


For cases where we don't want to change HTML source and to not pass additional argument ‘–allow-file-access-from-files’, this could be a quick effective solution.
Hari Prasad
  • 1,162
  • 1
  • 10
  • 11