I have an interactive site with some embedded videos. The .mp4 with captions plays perfectly in Safari and shows the expected CC toggle control, but when I open up the same content in Chrome, Firefox or Edge, there are no caption controls. What am I doing wrong?
No one is going to have a clue as to what you are possibly doing wrong. Because we cannot see what you are doing. Posting an example of the project and explaining your process would help.
Aside from that my experience with closed captions in most browsers has been spotty but I am no expert and only really got involved with them when writing this
( which probably could do with updating - I think when I last looked at a few months agao Chrome works and Safari did not. )
You can also always use a third-party solution and not rely on browser support.
or "bake/burn" the subtitles.
MP4 files with a caption track do seem to work in Safari, but Firefox and Chrome are unable to read that data so they ignore it. I think your best bet is to use a tool like handbrake and burn the captions in. For your video, you would select 'English' under the subtitles track and then render the video to have the captions actually rendered as pixels.
For wider accessibility you should also get the actual transcript and use one of the suggestions @MarkHunte and @MaxZieb suggested above if you want to support screen readers.
Personally, I think this is a limitation of Hype.
I use WebVTT to create captions. (I don't like adding permanent captions to video. This causes problems for multilingual captions.) However, adding a caption file to a Hype video has to be done manually with HTML. (I don't use the "Video" element. I use regular HTML to display the video.)
So, step one... make the WebVTT caption file. Maybe one day I'll get around to finishing "Intensifies", but this is a decent alternative...
https://testdrive-archive.azurewebsites.net/Graphics/CaptionMaker/Default.html
...and there are other solutions. The point is to create a WebVTT file for the captions. Then, step two, just add it to the HTML...
The browser support for WebVTT is very good...
1 Like