HTML5 Video Subtitle Wrap-up
You want to be cool, innovative, open and all that. Or perhaps, you just want your videos to work on iOS. Either way you’re going to have to replace Flash video with HTML5 video on your website. This is a practical guide to HTML5 video solutions for those that need subtitles or captions (the “track” element) to be available on their videos.
Since everyone seems to be talking about HTML5 all the time, since uninformed people are crying “death to Flash”, you would think that HTML5 video should be a simple upgrade by now. Well, the truth is that the bare-bones basics are pretty simple. IE9, Firefox 11 and Chrome 17 all have OK little native HTML5 video players and Firefox even lets you put the video in full-screen (the others don’t). But subtitles you can forget – it’s now in the spec with WebVTT format (.vtt), but no-one supports it or does anything with it.
MediaElement.js is a very nice video player with Flash fallback, and in my opinion currently the second-best solution. But for you it might be the best. It supports the basics of WebVTT (by this I mean, the parts which are in common with SubRip, [.srt], i.e. plain text). It doesn’t support any advanced features like the voice element or styling.
Don’t believe that stuff they claim about Google-translation of subtitles, Google has removed the API feature and therefore it doesn’t work anymore, but MediaElementJS haven’t updated their doco or “sales literature” (probably still a valid term even in relation to a free product).
- The main problem is that subtitles don’t work in Firefox on full-screen mode. They just disappear.
- The other problem is that subtitles block the full-screen button in Firefox. Basically when a caption is showing, you can’t click the full-screen button. Now, considering the fact that captions don’t work in full-screen mode, this is arguably a feature. You be the judge!
The caption selector usability leaves a little to be desired too. But now we’re nit-picking. Overall it’s a very good player and recommendable as an HTML5 video + subtitle solution.
I liked Video.js – it felt good and just seemed to work. Various subtitle-related things didn’t work, and as I was noting them in this article, Steve Heffernan actually responded to my bug reports and got some great subtitle support going. So here’s my revised assessment of this library:
- You need at least version 3.2 for decent subtitle support. As of this writing you’ll have to download it from github or check out the demo at http://vjs.zencdn.net/3.2/demo.html and just download the relevant files from there.
- Basic WebVTT subtitle functionality works well across browsers! Yes, subtitles do work on Firefox, even in full-screen mode.
- You have to be careful where you get your subtitles from in respect to your html source file. If you try to run everything from your localhost, Firefox will show the subtitles but IE9 and Chrome will not. Knowing about this might save you some hair-pulling in development. When you put the HTML file on your webserver, then you will need to have the subtitles file on the same server. Otherwise no browser will show them.
- When using Flash mode in Firefox (i.e. when there is only an mp4 file available) and you go to full-screen, your video stops playing and goes back to the beginning. The only reasonable solution to me is to offer webm videos as well as mp4 videos, because Firefox will then use its native HTML5 player which does not exhibit this bug.
Overall I found Video.js to be a very nice video library, and its subtitle support as good or better than any other, so I went with it. It still doesn’t support any advanced features of WebVTT like the voice element or styling, but it will get you going for now and hopefully they’ll add support in the future. You can see an example of it in action on this telemedicine patient experience video.
I don’t think Captionator is a full video player solution (with skinning, Flash fallback etc) but rather focused on enabling full HTML5 subtitle support in browsers. It claims “Supports 100% of WebVTT, along with WebVTT v2 proposed features” which sounds pretty impressive. The MediaElement project has mention of actually including Captionator in their own code. Before Steve fixed up video.js, I thought that maybe I could combine Captionator and video.js, so I checked it out, but didn’t even get to the download because on their demo page I experienced the following:
- Captions disappear on full-screen in Firefox.
- The demo doesn’t work in IE9. I just see a tiny box with the video playing.
VideoSub doesn’t appear to have received any development effort since mid-2010 so this is not a good start for the fast-moving world of HTML5. The next thing I noticed is a statement that there is no support for WebVTT as yet. The reasons are understandable, and the only difference between SRT and VTT are things that at the moment aren’t supported much anyway, so it was worth checking out. Unfortunately it also suffers from the captions disappearing in full-screen on Firefox. So I didn’t see reason to take the tests any further.
I saw a surprising amount of mentions of Playr considering the demo doesn’t work in IE9! The control bar appears in the middle of the video! Unfortunately, when your demo doesn’t work in IE9 it’s simply a non-starter. Update: Julien informs us in the comments that this issue is now fixed.
I’m a bit disappointed that I only stumbled upon LeanBack Player once I’d already implemented my solution (twice actually, once in MediaElement.js and then again as I switched to Video.js). I don’t have time to investigate it in detail now, however looking at the demo, it looks like a really nice player and it claims WebVTT subtitle support. It also has plugins for detailed analysis of video usage via Google Analytics.
I downloaded it and there was one reservation – there’s no Flash player in the download. It appears that you have to provide your own fallback Flash player, and that’s not really ideal. Additionally you’ll have to get your subtitles correctly working in their player and in your fallback Flash player. So if that’s the case, that would probably have ruled out this option as too much work anyway.
Also worth noting is that the player is GPL licenced and carries commercial branding, if you want to get rid of that you have to purchase a business licence.
Kaltura is another one I only really checked out after I’d implemented my solution, but I list it here to let you know that it exists and that it claims WebVTT support. It looks quite good and has some influential partners. Even if you don’t use the player there is some handy general info on that page about web server config and h264 profiles.
A Note about Mobile – iOS and Android
Now after all this effort to get your videos working on iOS I have to give you the bad news – the iPhone does not show subtitles! They put the video into full-screen mode and ignore the subtitles. I’m guessing iPad does the same thing, but I have to test it. I tested an Android phone which also had similar behaviour.
Nevertheless, being able to watch the videos without subtitles is definitely better than not being able to watch them at all, so HTML5 video is still a win. And presumably Apple will start to support subtitles at some point in the future, since they are part of the HTML5 spec.
That pretty much wraps up the subject – I strongly recommend MediaElement.js or Video.js as the best choices for an HTML5 video player with subtitle support and flash fallback, but would also investigate Kaltura if I was starting from scratch now.