Лучший способ реализовать видео HTML5

Question

Я понимаю, что HTML5-видео намного сложнее, чем его сторонники хотели бы, чтобы мы верили.Safari использует собственный кодек H.264, в то время как Firefox, Chrome и Opera поддерживают Theora с открытым исходным кодом.Internet Explorer тоже не поддерживает, поэтому нуждается в запасном варианте, таком как .mov или Flash.

Я нашел где-то превосходное руководство, которое собрало пошаговое руководство по HTML5 для всех этих браузеров, ноЯ не могу найти это нигде.Очень раздражает: (

Какой лучший способ реализовать видео HTML5, чтобы охватить все эти браузеры? (К сожалению, Flash не вариант.)

---

Редактировать: Хорошо, из того, что я прочитал, вот мой собственный ответ: это лучший способ реализовать видео HTML 5 ...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

Это единственный способ, который работает, как и ожидалось, на каждомбраузер до сих пор. К сожалению, автозапуск не работает в Chrome?: (

Обновление: Chrome не поддерживает автозапуск.

Answer 1

Я подозреваю, что это руководство от Kroc Camen - это то, что вам нужно http://camendesign.com/code/video_for_everybody.

Это не так сложно, как он обрисовал, если вы хотите использовать Flash для поддержки старых IE.* Две версии каждого видео, одна Theora и одна H.264, будут охватывать все возможные варианты.Одного H.264 достаточно, если вы не возражаете против браузеров, использующих Flash вместо Theora.

Также стоит прочитать в WebM, он заменяет theora.

Answer 2

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

Этот пример взят из книги HTML5 Up and Running . Вы перечисляете каждую поддерживаемую кодировку видео отдельно в одном теге <video>. Браузер попробует каждый, начиная с первого. Этот пример показывает три кодировки. Вам нужно будет сделать собственное кодирование видео самостоятельно. Для поддержки нескольких браузеров вам потребуется несколько кодировок.

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

Answer 3

Так что, если Flash не вариант, вы не сказали почему, но я думаю, что это не имеет значения, что приемлемо для IE?Вы рады, что вообще не поставляете видео для IE, или что вам нужно?

Все приведенные выше примеры хороши и действительны.Там, где была введена опция Flash, вы можете заменить ее на любое другое изображение - текст, текст, информирующий пользователя о том, что его браузер не поддерживается, и предоставляющий вместо него ссылку на видео для загрузки.Что бы вы ни хотели на самом деле, так как в основном браузер будет игнорировать все, что он не понимает, пока не доберется до того, что он делает.

Answer 4

это руководство , о котором вы говорите?