10

I imported Webvtt file into mp4 file as a track, following the instruction Subtitling with GPAC

,and I checked that subtitles are properly shown when I using GPAC's Osmo4 player.

Now, I'd like to play this video with subtitle through HTML5 video tag, but it seems that HTML media track element is requiring src attribute that designate location of the webvtt file.

Is there any way to play embedded subtitle?

han0ah
  • 229
  • 2
  • 12

2 Answers2

8

No, HTML5 Video Tag does not currently support internal subtitle and audio tracks.

The correct way of inserting subtitles in HTML5 Video Tag is:

<video width="640" height="480" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />
</video>

Additional Information on HTML5 Video Subtitling and WebVTT

Jaruba
  • 1,055
  • 11
  • 22
  • to automatically convert `srt` files to `vtt`, use [redbullzuiper/SRT-Support-for-HTML5-videos](https://github.com/redbullzuiper/SRT-Support-for-HTML5-videos) – Binar Web Jan 30 '22 at 11:08
5

It is now possible with MP4Box.js to extract on-the-fly the subtitles from the MP4 and to play them in the browser. You should check this demo in particular the Audio/Video/WebVTT example.

cconcolato
  • 1,186
  • 10
  • 9
  • Note that the demo is a bit weird on Firefox: first you can select an example from the "Select or set URL:" dropdown; when you do so, a spinner will appear on the video element, making you think the file is about to download and play - but it's not! After you make a selection in the dropdown, you **have** to click on the Play button below - and only then does the file start downloading and playing! Also, the mouseover reactions on Firefox 64 are a bit off... – sdaau Jan 04 '19 at 03:53
  • Turns out, interaction with the demo is explained under "Instructions & Notes" tab; note: "*... select a video hosted on a server which allows this page to fetch those videos using XHR (i.e. using CORS) ...*"; there is also a section in the "Select or set URL:" dropdown called "Non-fragmented files (require disabling CORS)" which is the only section with full http* URLs, but none of them will load (if web security/CORS is enabled, which it is by default on FF - see its JS console while loading a link w/ "Play" button: "*Cross-Origin Request Blocked: The Same Origin Policy disallows...*") – sdaau Jan 04 '19 at 04:19