How can I precisely detect HLS support on different browsers and different OS?

Question

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

Answer 1

HTML5test.com 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.com */

        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)

Answer 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>