How to display local video with local subtitles (without webserver)

Question

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/

Answer 1

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>