HTML5 video: How to test for HLS playing capability? (video.canPlayType)

javascript html http-live-streaming
Felix Schwarz picture Felix Schwarz · Sep 13, 2012 · Viewed 22.6k times · Source

I have video which is delivered over HLS. Now I'd like to test in JavaScript if the device actually can play HLS video in HTML5.

Usually in Javascript I did something like document.createElement('video').canPlayType('video/mp4') However I can't figure out which 'type' is the right one for HLS.

Apple's Safari HTML5 Audio and Video Guide seems to suggest "vnd.apple.mpegURL" ("Listing 1-7 Falling back to a plug-in for IE")

<video controls>
    <source src="HttpLiveStream.m3u8" type="vnd.apple.mpegURL">
    <source src="ProgressiveDowload.mp4" type="video/mp4">
....

but canPlayType("vnd.apple.mpegURL") return an empty string even on iOS devices which can play actual HLS streams perfectly fine.

Is there any way to check for playback capabilities without 'external knowledge' (e.g. "check for iOS user agent and assume it can play hls")?

I know I can specify multiple sources in a element and the browser will use the first playable source. However in my case I need feed a single URL to JW Player which I can't modify. So somehow I need to find the "best playable URL" from a set of video encodings. (An open source JS library which handles source selection would be a nice workaround though.)

Answer

schmod picture schmod · Oct 16, 2012

I haven't tested this across the board, but it looks like you should be testing for the full HLS mimetype application/vnd.apple.mpegURL instead of just just vnd.apple.mpegURL.

application/x-mpegURL and audio/mpegurl are also suitable mimetypes for the HLS m3u8 file. audio/x-mpegurl is also listed as an acceptable mimetype according to Apple, but it doesn't appear to be mentioned in the actual HLS draft spec.

In Safari on iOS and OS X, 

document.createElement('video').canPlayType('application/vnd.apple.mpegURL')

returns maybe. I'm not sure if there are any other browsers that support HLS -- Android doesn't seem to like this syntax (despite some assertions I've seen to the contrary), and I believe that it may be due to the fact that the actual video playback is delegated to an external application, rather than the browser itself.

References:

  1. http://developer.apple.com/library/ios/#technotes/tn2235/_index.html
  2. http://www.longtailvideo.com/html5/hls
  3. http://tools.ietf.org/html/draft-pantos-http-live-streaming-03
  4. http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More