Flash-видеопроигрыватель VS HTML 5 Video

Мне нужно добавить видеоплеер для воспроизведения видео на веб-странице. Обычно я использую Flash player с помощью библиотеки swfobject. который работает, если включены как flash player, так и javascript.

В настоящее время я использую строгий документ XHTML 1.0.

Мой вопрос: могу ли я просто изменить свой тип документа на тип документа HTML 5 и добавить видеопроигрыватель с использованием видео HTML 5. для браузера, который не поддерживает HTML5, я могу использовать javascript.

в этом состоянии в поддерживаемом браузере видео будет работать без Flash Player и javascript, а в неподдерживаемом браузере будет работать с поддержкой js.

Это возможно? Это хорошая идея?


html html5-video flash xhtml
person Jitendra Vyas    schedule 12.06.2010    source источник
comment
Вам нужно будет обнаружить пользовательские агенты через javascript и, при необходимости, вставить тег видео или наоборот.   -  person phwd    schedule 12.06.2010

Ответы (2)


arrow_upward
2
arrow_downward

«HTML5» (при использовании HTML5 я пока собираю в одну кучу реализации основных поставщиков браузеров) еще не имеет согласованного кодека для <video>, поэтому разные браузеры используют разные кодеки; некоторые проприетарные, некоторые нет. Вы можете использовать тип документа HTML5 и использовать <video> сейчас, но вам понадобится кодек H.264 для Safari, Ogg / Theora для Firefox и Flash в качестве запасного варианта, если ничего из вышеперечисленного не требуется. Да, и не забудьте изображение, если Flash не установлен, и текст, если изображения отключены, и рукописное письмо пользователю, если ...

Так что-то вроде ...

<!DOCTYPE html>
...
<video>
    <source src='your_movie.ogv'  />
    <source src='your_movie.m4v'  />
</video>

Из других новостей мне понравился этот пост в блоге JW под названием Safari и Quicktime не являются стандартами.

person typeoneerror    schedule 12.06.2010
comment
как youtube, vimeo и т. д. дают проигрыватель HTML 5? - person Jitendra Vyas; 12.06.2010
comment
С поддержкой H.264 и экспериментальными сборками Opera и Firefox: youtube.com/html5 - person typeoneerror; 12.06.2010
comment
Вы имеете в виду автоматическое переключение при просмотре YouTube с устройства iOS? - person phwd; 12.06.2010

arrow_upward
2
arrow_downward

в первую очередь вы можете взглянуть на http://camendesign.com/code/video_for_everybody если вы еще не сталкивались с этим.

в любом случае, это должно сработать, если вы хотите предоставить альтернативу пользовательской флеш-памяти:

<video width="..." height="..." controls="controls" preload="none">
  <source src="video/demo.mp4"  type="video/mp4" />
  <source src="video/demo.webm"  type="video/webm" />
  <source src="video/demo.ogv"  type="video/ogg" />
  <span id="flashAlternative">what, no flash+no html5? crazy!</span>
</video>
<script>
  swfobject.embedSWF( ..., "flashAlternative", ... ); 
</script>

очевидно, что если вы хотите использовать видео youtube / vimeo / ... в качестве альтернативы, вы просто помещаете код для встраивания вместо тега скрипта:

<video width="..." height="..." controls="controls" preload="none">
  <source src="video/demo.mp4"  type="video/mp4" />
  <source src="video/demo.webm"  type="video/webm" />
  <source src="video/demo.ogv"  type="video/ogg" />
  <!-- embedding code here -->
</video>

оба этих решения предпочитают видео html5 флеш-видео, если вы не хотите платить за большую пропускную способность, вы можете предпочесть показывать видео YouTube всем людям, у которых есть flash, и только откатиться к html5, если он недоступен. тогда это будет выглядеть примерно так:

<object type="application/x-shockwave-flash" width="..." height="..." data="...">
    <param name="movie" value="..." />
    <video width="..." height="...">
        <source src="..." type="video/mp4" />
        <source src="..." type="video/webm" />
        <source src="..." type="video/ogg" />
        <!-- here comes the alternative for people who have neither flash, nor html5 -->
    </video>
</object>

обратите внимание, что вы не можете просто скопировать код для вставки из youtube / video и вставить видео html5 внутрь, вам нужно изменить его так, чтобы он выглядел так, как указано выше (атрибуты data и movie указывают источник файла swf, тег вставки не требуется! ).

person kritzikratzi    schedule 08.07.2010
comment
для полноты: я протестировал только второй и третий пример, вам может потребоваться немного изменить пример swfobject, чтобы он работал, но вы должны уловить идею! - person kritzikratzi; 08.07.2010