Как проверить возможность воспроизведения IE и WEBM?

У меня есть страница HTML5, на которой размещен видеоконтент с использованием тега HTML5 video. Сам контент закодирован в формате .webm и отлично работает. Кроме Internet Explorer, конечно.

В то время как более новые IE будут правильно отображать видеоконтейнер, встроенная поддержка .webm отсутствует, и браузер отображает «Недопустимый источник».

Чего я, однако, не вижу, так это средства для проверки результата «Недействительный источник», а затем возможности действовать в соответствии с ним.

В идеальном мире я мог бы предвидеть некоторое тестирование jQuery для «Недопустимого источника», а затем отображать «Вам нужен WebM для Internet Explorer (ссылка)!», Но я не нахожу в DOM никакого «Недопустимого источника» для проверки.

Я пытаюсь избежать использования безвкусного олдскульного «что это за браузер?» сценарий; но даже если бы я это сделал, мне все равно нужно было бы знать, был ли случай «Недействительный источник» или нет.

Каковы наилучшие средства, если они существуют, для проверки и принятия мер в отношении этого результата "Неверный источник", если в браузере IE нет подключаемого модуля "WebM для Internet Explorer"?


person Cat cat Cat cat Cat    schedule 18.01.2016    source источник
comment
См. раздел canPlayType.   -  person Sampson    schedule 19.01.2016


Ответы (1)


Сначала вы проверяете, поддерживается ли видео HTML 5. Если это так, вам нужно проверить поддержку webm, что менее прямолинейно. Тестирование видео HTML 5 тривиально:

var element = document.createElement( "video" );

if ( element.canPlayType ) {
    /* HTML 5 <video> is supported
}

Дойдя до этого места, вы можете использовать тип canPlayType для определения вероятности поддержки webm в вашем браузере:

switch ( element.canPlayType( "video/webm" ) ) {
    case "probably": /* Likely supported */ break;
    case "maybe":    /* Support unknown  */ break;
    case "":         /* Not supported    */
}

Отсюда вы можете загрузить другую версию видео, вернуться к флеш-решению или просто отобразить сообщение с просьбой выбрать другой маршрут.

Вы можете не писать логику обнаружения функций самостоятельно, а вместо этого использовать такое решение, как Modernizr:

if ( Modernizr.video ) {
    if ( !Modernizr.video.webm ) {
        /* webm definitely not supported */
    }
}
person Sampson    schedule 18.01.2016