Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Как определить поддерживаемые форматы видео для тега видео HTML5?

Автор вопроса: CokegodОтветов: 2

Я делаю приложение в HTML5, используя тег видео, в приложении пользователь выбирает видеофайл, и я играю этот файл. Все это происходит локально, потому что я ссылаюсь только на этот файл на компьютере пользователя.

Я хочу, чтобы в моем приложении воспроизводились только те форматы, которые может воспроизводить браузер, и отображалась ошибка для неподдерживаемых форматов. Проблема в том, что разные браузеры могут воспроизводить разные форматы.

Я знаю, что могу проверить браузер и сопоставить его с форматами, которые, как я знаю, он может воспроизводить, но что, если браузер обновится для поддержки другого формата? Мне придется обновить свое приложение новой информацией, а тем временем пользователи не смогут воспроизводить поддерживаемые форматы. Есть ли способ проверить только поддерживаемые форматы видео?

javascripthtmlhtml5-videocross-browser

Ответы

Ответ 1 · рейтинг 49 · Will

Вы можете проверить кодеки для разных типов видео с помощью HTMLVideoElement.prototype.canPlayType. Существует также отличная библиотека обнаружения функций HTML5, Modernizr.

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}

Ответ 2 · рейтинг 2 · leopic

Я бы порекомендовал вам использовать что-то вроде http://videojs.com/, они используют запасной вариант Flash, и их синтаксис будет дать вам правильный порядок форматов, которые вы должны использовать для всех браузеров.

Это выглядит так:

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a>

Если браузер не понимает MP4, он переходит к WebM, если нет, переходит к OGG, если не понимает, переходит к резервному варианту Flash.

Думайте об этом как об объявлениях семейств шрифтов в CSS.

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы