Login/Register
Is it possible for HTML5 video to play subtitles embedded in mp4 file as a track?
Asked Answered
Solved htmlvideohtml5-videosubtitlewebvtt
C

2

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?

Came answered 1/12, 2014 at 7:38 Comment(0)
H
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.

Hjerpe answered 15/9, 2015 at 7:30 Comment(2)
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... – Gentry
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...") – Gentry
P
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

Paulettepauley answered 2/12, 2014 at 9:49 Comment(1)
to automatically convert srt files to vtt, use redbullzuiper/SRT-Support-for-HTML5-videos – Fief
H
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.

Hjerpe answered 15/9, 2015 at 7:30 Comment(2)
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... – Gentry
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...") – Gentry

© 2022 - 2024 — McMap. All rights reserved.