Как я могу точно определить поддержку HLS в разных браузерах и разных ОС?

В соответствии с этим ответом, чтобы проверить возможности браузера для воспроизведения видео HLS, MIME application/x-mpegURLможет использоваться. Но проблема с этим подходом заключается в том, что он возвращается maybeдля iPhone (фактически поддерживает HLS), а также для Firefox для Android (который не поддерживает). Хотя это хорошо работает, возвращая пустую строку в случае настольных браузеров, таких как Chrome и Firefox.

Есть ли какой-либо конкретный способ проверить поддержку HLS в браузере?

HTML5test.com смог предсказать поддержку HLS точно как Да или Нет. Как это работает?

javascript,browser,hls,

1

Ответов: 1


1

HTML5test.com смог предсказать поддержку HLS точно как Да или Нет. Как это работает?

В исходном коде на связанной странице смотрите 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)

JavaScript, браузер, HLS,
Похожие вопросы