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

问题

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.com could able to predict the HLS support precisely as Yes or No. How is this functioning?

回答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)

来源：https://stackoverflow.com/questions/40039076/how-can-i-precisely-detect-hls-support-on-different-browsers-and-different-os