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

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

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

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

Ответ 1

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

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

Это происходит следующим образом:

<a href="#" onclick="location.href='http://video-js.zencoder.com/oceans-clip.mp4'; return false;">MP4</a>,
<a href="#" onclick="location.href='http://video-js.zencoder.com/oceans-clip.webm'; return false;">WebM</a>,
<a href="#" onclick="location.href='http://video-js.zencoder.com/oceans-clip.ogv'; return false;">Ogg</a>

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

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