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

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

24 голосов
/ 17 сентября 2011

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

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

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

Ответы [ 2 ]

46 голосов
/ 17 сентября 2011

Вы можете проверить кодеки для различных типов видео с помощью 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 голосов
/ 17 сентября 2011

Я бы порекомендовал вам использовать что-то вроде 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.

...