WebVTT subtitles and captions do not appear when accessed via file://
Categories
(Core :: Audio/Video: Playback, defect)
Tracking
()
People
(Reporter: ajf, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0
Steps to reproduce:
I was writing a post on my blog, and embedded a video clip. To provide accessibility to deaf or hard-of-hearing users, I wanted to add subtitles to the clip.
I created a valid WebVTT file and put a <track> element inside my <video> tag. I then opened the HTML file in Firefox, to test that my post would show up correctly.
For reproducing, it's enough to grab these files from my blog:
• https://hikari.noyu.me/blog/2023-01-10-polygons-from-paragraphs-3d-model-html-css/2010-steve-jobs-ibooks-demo-store-animation.mp4
• https://hikari.noyu.me/blog/2023-01-10-polygons-from-paragraphs-3d-model-html-css/2010-steve-jobs-ibooks-demo-store-animation.srt
Then make a tiny HTML file containing just:
<video src="2010-steve-jobs-ibooks-demo-store-animation.mp4" controls>
<track default label=English kind=captions src="2010-steve-jobs-ibooks-demo-store-animation.vtt" srclang=en />
</video>
Put the HTML file in the same directory as the .mp4 and .srt files and then open it in Firefox in the normal way. The URL should begin with “file://”.
Actual results:
Firefox's built-in controls showed that the captions track had been recognised and was selected. But no captions showed up when playing back the video, even after I force-refreshed the page and double-checked that I had the captions track selected.
I became concerned that my captions file might be somehow defective and wasted about 20 minutes trying to rule out any possible problems with the file itself.
Expected results:
The captions should have been displayed.
If this is considered some kind of origin policy violation: the browser should make a deliberate exception for this case. I can't think of a good reason that video can be displayed, but subtitles can't, and the practical effect is very anti-accessibility.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Sorry, the URL for the subtitle file should have been https://hikari.noyu.me/blog/2023-01-10-polygons-from-paragraphs-3d-model-html-css/2010-steve-jobs-ibooks-demo-store-animation.vtt
|
||
Updated•2 years ago
|
|
||
Comment 3•2 years ago
|
||
When using the following codes, and host a local server. I can see the subtitle displayed correctly.
<video src="2010-steve-jobs-ibooks-demo-store-animation.mp4" controls>
<track default label=English kind=captions src="2010-steve-jobs-ibooks-demo-store-animation.vtt" srclang=en />
</video>
I guess the problem you encountered is because vtt file didn't get loaded correctly. I know there are some security check for loading external files, you would probably see this error Security Error: Content at file:///C:/Users/Alastor/Downloads/vtt-test.html may not load data from file:///C:/Users/Alastor/Downloads/2010-steve-jobs-ibooks-demo-store-animation.vtt. when you open your test html file directly. You will need to make sure you host a local server first, then open your test file. Eg. http://localhost:8000/YOUR-TEST-FILE.html.
Description
•