HTTP Live Streaming detection on mobiles

Question

I want to detect if a mobile phone/tablet can play HTTP Live Streaming (m3u8).

I'm currently testing with this script:

function isHLSEnabled() {
    var videoElement = document.createElement('video'),
        canPlayAppMpeg = videoElement.canPlayType('application/x-mpegURL'),
        canPlayAppleMpeg = videoElement.canPlayType('vnd.apple.mpegURL');

    return (
        (canPlayAppMpeg == 'probably' || canPlayAppMpeg == 'maybe')
        || (canPlayAppleMpeg == 'probably' || canPlayAppleMpeg == 'maybe')
    );
}

But it doesn't work well on some Samsung browsers (stock, dolphin, etc) - it returns false (because the canPlayTypes are empty strings) however it is able to play the video.

Are there any bulletproof(ish) solutions for detecting this kind of streaming support?

This is still a problem on Android 5.0 and Android 5.1 with stock browsers. Chrome plays ok. — easwee, Jul 15 '15 at 07:57
I did not try this but does it work if you set the src of the video element to the stream src and check if the video is playing ? — Nimmi, Nov 09 '15 at 16:38

Niels · Answer 1 · 2015-12-01T13:58:43.387

I am not sure if there is bulletproof solution available at this point.

Using the video element's canPlayType method is the only thing that really 'works'. There are around +/- 5/6 media formats which have oke support from modern browsers.

So basically you create a list of formats you want to support and test from them. The canPlayType method allows you to also specify which codec. Which you should do since just testing for WebM might no lead to the desired result, an example:

element.canPlayType('video/webm; codecs="vp9"').

After you do so you should generally get three different responses: "probably", "mabye" or ""(the empty string meaning: not supported).

Some resources you might find useful:

Mozilla provides a list of the main stream formats/codec:

Mozilla Media Format List

Modernizr is framework that will test support for the majority of html5 video formats. You might also want to take a look at their source code for the html5 video detection.

Modernizr HTML video detect

HTTP Live Streaming detection on mobiles

1 Answers1