Experiences Finding a HTML5 Video Player

Last month I was doing some html5 with Javascript for a side project at work and needed to incorporate a video player. I wanted to find something that would work across as many browsers and mobile devices as possible. The hitch was that I needed something with a license that could be used commercially. The real monkey wrench came when I realized I also needed caption support. Personally, I've done my best to ensure this site is accessible by people with a disability. In my day job, exhibits are often designed with ADA(Americans with Disability) requirements in mind; but I also personally feel that it is an important design consideration.

So in summary I needed:

1. Html5 Primary Playback
2. Support for as many browsers and mobile devices as possible (requires multiple media types explained below)
3. Flash fall back in the absence of html5 capability
4. A license that allows commercial use
5. Support for as standardized as possible captions

After all of these requirements, only one player met my criteria of ten that I examined:
The Kaltura HTML5 Media Library

Adding the Kaltura KDP 3 player to the HTML5 Media Library allows for Flash fall back.

Lessons Learned In HTML5 Media Compliance

Media Formats For Compliant Video:

As gleaned from the jplayer developer guide(I was originally going to use jplayer but couldn't due to a lack of caption support) the three primary video formats that are needed to work across as many devices as possible are:

1. M4V (MP4)
2. OGV
3. WEBM

Compliant Caption Formats:

The SRT file format is what I chose for captions. It is a text file that can be loaded into a few of the main html5 players. The JW Player documentation on captions offers some great insight on captions. Kaltura supports SRT files across several different languages even. Handbrake also supports SRT files for adding IOS soft caption support. Check out this srt sample:


You will get mixed results with the html inclusions, but IOS5 picked them up in my tests.

How to Create Compliant Media

M4V(MP4)

Based on my research, the M4V file container is the exact same as mp4 except for the file extension. Apple started using the .m4v extension and it stuck as the extension that is usually implemented in players wanting to support IOS devices. The M4V files can be played in Flash as well if encoded properly to the H.264 baseline spec. The M4V file will bring IOS support and Flash fallback support.

Originally I used one of my magic huge FFMPEG with the x264 library commands to produce a baseline compliant m4v, but realized for IOS soft caption support I needed to embed the .srt file inside the M4V file. FFMPEG can't do this, so I attempted to use MP4Box to insert the track. After wasting about an hour I found out using MP4Box doesn't work when played back in IOS5, but handbrake does, so I used that (thankfully handbrake is now available across several platforms).

OGV

To make an OGV file, I used ffmpeg2theora, which is a standalone command line application. My source files are .mov files with audio and video, so a simple command would look something like this for the source file "P1030320.MOV" and resulting file "output.ogv". The -v and -a parameters control quality.

WEBM

To make a webm file I used good old ffmpeg. Instead of having to fool with building ffmpeg from source, I usally get it from the WinFF project. Webm encoding requires a recent version of ffmpeg. A ffmpeg command with "P1030320.MOV" as the input and "output.webm" as the output will look something like this:


Webm extends support for additional browsers. On: http://www.webmproject.org/users/ They report the following browsers support it:

• Firefox 4+
• Opera 10.60+
• Chrome 6+
• IE 9+

Web Server Headers/MIME Types

These media formats are pretty new, so make sure if they aren't already in your web servers list of MIME types, you need to add them. Many of the players require valid mime type output by your web server or applications wont know how to handle the media files. For convenience, here are what the MIME type responses are for m4v, ogv, and webm.

• M4v   video/x-m4v (and if that doesn't do it video/mp4)
• ogv   video/ogg
• webm   video/webm

In summary, hopefully that helps to consolidate some of this html5 video information for anyone else interested. The neat thing about the SRT caption format is that it is quite human readable. In my application besides injecting srt files into the video player, I also use server-side scripts to load them directly into the browser just in case none of the video options work.