如何准确检测不同浏览器和不同操作系统上的 HLS 支持？

Question

根据this的回答，为了测试浏览器播放HLS视频的能力，可以使用MIMEapplication/x-mpegURL。 但是这种方法的问题是它返回maybe for iPhone（实际上支持HLS）以及Firefox for Android（不支持）。尽管在 Chrome 和 Firefox 等桌面浏览器的情况下返回一个空字符串效果很好。

是否有任何精确的方法来检查浏览器中的 HLS 支持？

HTML5test.com 可以准确地预测 HLS 支持为是或否。这是如何运作的？

Answer 1

JavaScript 版本

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

然后将其用作：

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

仅 HTML 版本（首选）

让浏览器选择它支持的第一个来源。这样更安全。

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

Answer 2

HTML5test.com 可以准确预测 HLS 支持为 Yes 或否。这是如何运作的？

在链接页面的源代码中，请参阅 engine.js 2405-2533 行，其中使用了 HTMLMediaElement.canPlayType()

    /* 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
        });
    },

另见Apple HTTP Live Streaming (HLS)