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

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

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

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


javascript html html5-video cross-browser
person Cokegod    schedule 17.09.2011    source источник

Ответы (2)


arrow_upward
49
arrow_downward

Вы можете проверить кодеки для разных типов видео с помощью 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"' );
}
person Will    schedule 17.09.2011
comment
Это мне очень помогло, спасибо. Интересно, а почему там два теста для мп4? Я считаю, что H264 - это тип mp4, и я тестирую поддержку mp4 или webm. - person edwinbradford; 16.03.2012
comment
Вот ссылка на точный исходный код: github.com/ Modernizr/Modernizr/blob/master/feature-detects/ - person BishopZ; 16.07.2014
comment
Следует отметить, что это проверяет наличие ограниченной поддержки базового уровня 3 H.264. - person Alex W; 03.03.2015

arrow_upward
2
arrow_downward

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

person leopic    schedule 17.09.2011
comment
Это не совсем правильный ответ. Это правильно, что браузеры проверяют тип источника, и если они не понимают его, они пробуют следующий источник по порядку (и, возможно, используют flash, если вы добавили его в качестве запасного варианта), но вы должны принять во внимание видео кодек. Если вы явно не укажете кодек для типа видео, может случиться так, что браузеру будет известен тип видео, но произойдет сбой из-за недоступной поддержки кодека. В этом случае браузер не будет пытаться загрузить следующий источник. - person Peter Pajchl; 23.11.2011
comment
просто пример кода, чтобы увидеть разметку с кодеком: <video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> Video tag not supported. Download the video <a href="movie.webm">here</a>. <video> - person Peter Pajchl; 23.11.2011