Viewing HTML5 video with captions offline

Question

I am trying to implement an HTML5 video player for viewing local videos using a local HTML file, and I would like to have VTT captions and subtitles capability.

I am

Answer 1

I've hacked up a solution! It requires only two files:

• The video file.
• The HTML file, containing:
  • The subtitles in either VTT or SRT format.
  • A script to parse the embedded VTT text and add it to the video.

Get my solution from this GitHub Gist, or from below:

---

Alternative approaches:

• Use a JavaScript video player to dynamically update the DOM to display the subtitles. That was my previous approach, still available in this GitHub Gist. I used a heavily modified version of VideoSub v0.9.9 by Thomas Sturm.

• Use MP4Box.js to build a player that reads embedded subtitles from within the video file. (Try the “Multiplexed Audio/Video/Subtitle (unfragmented, AVC+AAC+WebVTT)” test video in this demo.)

• Use Subtitle Videoplayer from Chrome Web Store, or maybe build your own Chrome app. Yeah, this is a highly specific alternative and it is not cross-browser.

• In Chrome, you can disable the security checks by passing a command-line flag. Be careful when doing that!