According to this answer, to test the browser's capabilities to play HLS video, the MIME application/x-mpegURL can be used. But the problem with this approach is that it is returning maybe for iPhone (actually supports HLS) as well as for Firefox for Android (which doesn't support). Though this works well by returning an empty string in case of desktop browsers such as Chrome and Firefox.

Is there any precise way to check for HLS support in a browser?

HTML5test could able to predict the HLS support precisely as Yes or No. How is this functioning?

According to this answer, to test the browser's capabilities to play HLS video, the MIME application/x-mpegURL can be used. But the problem with this approach is that it is returning maybe for iPhone (actually supports HLS) as well as for Firefox for Android (which doesn't support). Though this works well by returning an empty string in case of desktop browsers such as Chrome and Firefox.

Is there any precise way to check for HLS support in a browser?

HTML5test. could able to predict the HLS support precisely as Yes or No. How is this functioning?

• javascript
• browser
• http-live-streaming

• HTML5test. are doing it or arent? Your last statement is a little vague. – Liam Commented Oct 14, 2016 at 9:05
• @Ram Have you tried using error event listener at <video> element? – guest271314 Commented Oct 14, 2016 at 9:38
• @guest271314 No! Could you elaborate that? – RamValli Commented Oct 14, 2016 at 9:39
• Attached onerror handler is called at <video> element at chromium when a <video> element having extension .m3u8 is set at src of element. – guest271314 Commented Oct 14, 2016 at 9:43
• See also stackoverflow./questions/32289662/… – guest271314 Commented Oct 14, 2016 at 9:53

2 Answers 2

JavaScript version

function supportsHLS() {
  var video = document.createElement('video');
  return Boolean(video.canPlayType('application/vnd.apple.mpegURL') || video.canPlayType('audio/mpegurl'))
}

Then use it as:

if (supportsHLS()) {
  myVideoElement.src = 'your-hls-url.m3u8';
} else {
  myVideoElement.src = 'your-plain-video-url.mp4';
}

HTML-only version (preferred)

Let the browser pick the first source it supports. This is safer.

<video>
    <source src="your-hls-url.m3u8" type="application/vnd.apple.mpegurl">
    <source src="your-plain-video-url.mp4" type="video/mp4">
</video>

HTML5test. could able to predict the HLS support precisely as Yes or No. How is this functioning?

At source code at linked page see engine.js at lines 2405-2533 where HTMLMediaElement.canPlayType() is used

    /* video element */

    function (results) {
        var element = document.createElement('video');

        results.addItem({
            key: 'video.element',
            passed: !!element.canPlayType
        });


        /* audioTracks property */

        results.addItem({
            key: 'video.audiotracks',
            passed: 'audioTracks' in element
        });


        /* videoTracks property */

        results.addItem({
            key: 'video.videotracks',
            passed: 'videoTracks' in element
        });


        /* subtitles */

        results.addItem({
            key: 'video.subtitle',
            passed: 'track' in document.createElement('track')
        });


        /* poster */

        results.addItem({
            key: 'video.poster',
            passed: 'poster' in element
        });
    },


    /* video codecs */

    function (results) {
        var element = document.createElement('video');

        /* mpeg-4 codec */

        results.addItem({
            key: 'video.codecs.mp4.mpeg4',
            passed: !!element.canPlayType && canPlayType(element, 'video/mp4; codecs="mp4v.20.8"')
        });

        /* h.264 codec */

        /* I added a workaround for IE9, which only detects H.264 if you also provide an audio codec. Bug filed @ connect.microsoft. */

        results.addItem({
            key: 'video.codecs.mp4.h264',
            passed: !!element.canPlayType && (canPlayType(element, 'video/mp4; codecs="avc1.42E01E"') || canPlayType(element, 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'))
        });

        /* h.265 codec */

        results.addItem({
            key: 'video.codecs.mp4.h265',
            passed: !!element.canPlayType && (canPlayType(element, 'video/mp4; codecs="hvc1.1.L0.0"') || canPlayType(element, 'video/mp4; codecs="hev1.1.L0.0"'))
        });

        /* theora codec */

        results.addItem({
            key: 'video.codecs.ogg.theora',
            passed: !!element.canPlayType && canPlayType(element, 'video/ogg; codecs="theora"')
        });

        /* vp8 in webm codec */

        results.addItem({
            key: 'video.codecs.webm.vp8',
            passed: !!element.canPlayType && canPlayType(element, 'video/webm; codecs="vp8"')
        });

        /* vp9 in webm codec */

        results.addItem({
            key: 'video.codecs.webm.vp9',
            passed: !!element.canPlayType && canPlayType(element, 'video/webm; codecs="vp9"')
        });

        /* does codec detection work properly? */

        var passed = true;

        if (!!element.canPlayType) {
            if (element.canPlayType('video/nonsense') == 'no') {
                passed = false;
                log('BUGGY: Codec detection bug in Firefox 3.5.0 - 3.5.1 and Safari 4.0.0 - 4.0.4 that answer "no" to unknown codecs instead of an empty string')
            }

            if (element.canPlayType('video/webm') == 'probably') {
                passed = false;
                log('BUGGY: Codec detection bug that Firefox 27 and earlier always says "probably" when asked about WebM, even when the codecs string is not present')
            }

            if (element.canPlayType('video/mp4; codecs="avc1.42E01E"') == 'maybe' && element.canPlayType('video/mp4') == 'probably') {
                passed = false;
                log('BUGGY: Codec detection bug in iOS 4.1 and earlier that switches "maybe" and "probably" around')
            }

            if (element.canPlayType('video/mp4; codecs="avc1.42E01E"') == 'maybe' && element.canPlayType('video/mp4') == 'maybe') {
                passed = false;
                log('BUGGY: Codec detection bug in Android where no better answer than "maybe" is given')
            }

            if (element.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') == 'probably' && element.canPlayType('video/mp4; codecs="avc1.42E01E"') != 'probably') {
                passed = false;
                log('BUGGY: Codec detection bug in Internet Explorer 9 that requires both audio and video codec on test')
            }
        }

        results.addItem({
            key: 'video.canplaytype',
            passed: element.canPlayType ? (passed ? YES : YES | BUGGY) : NO
        });
    },

See also Apple HTTP Live Streaming (HLS)