HTML5 видео и деградация?

Question

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

Для старых браузеров (или IE), которые вообще не поддерживают тег видео, это довольно просто:

<video width="320" height="240">
  <source src="vid.ogv" type='video/ogg'>
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

Они провалится и получат версию Flash (или другую альтернативу, такую ​​как изображение!)

Как насчет того, когда браузер поддерживает тег, но не кодек - как, например, FireFox 3.5 - и я не могу поддерживать OGG (возможно, потому что у меня уже есть обширные архивы H.264):

<video width="320" height="240">
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

Все, что я получаю в FireFox 3.5, это серая коробка с крестиком. Это не совсем хороший пользовательский опыт для пользователей FireFox! Я могу думать только об использовании JavaScript для проверки FF3.5 и изменения DOM!! это действительно плохой старый снова и снова! ... или есть какая-то часть спецификации, которую я пропускаю, например, тег 'novideo'?

Answer 1

Важной частью постепенной деградации являются возможности запросов... Погружение в HTML5 - отличное чтение... в частности, посмотрите раздел видео. Соответствующий код здесь:

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Примечание: для этого требуется проверка DOM, но для возможностей, а не для подписи браузера. Это правильно делать:-)

После того, как вы узнаете, поддерживает ли браузер, вы можете показать свой тег видео или включить лайтбокс или перенаправить по своему усмотрению.

Answer 2

Один действительно хороший способ решить эту проблему - использовать библиотеку js modernizer. Она действительно проста в использовании и быстра. Она может проверять возможности HTML5 в браузере пользователя. Посетите сайт здесь: http://www.modernizr.com/

Answer 3

Видео для тестовой страницы Everybody показывает, что Firefox 3.5 может воспроизводить только OGG. Возможно, вы захотите добавить флэш-версию, если вы действительно не хотите добавлять OGG. VfE также не использует JavaScript, так что, возможно, стоит разобраться.