Блог

Я понимаю, что видео 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 не поддерживает автозапуск. Обновление обновление: автозапуск работает с атрибутом «muted».

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

Это не так сложно, как он описывает, если вы с удовольствием используете Flash для поддержки старых версий.

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

Стоит также ознакомиться с WebM, он настроен на замену theora.

 <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 запущен«. Вы перечисляете каждую поддерживаемую кодировку видео отдельно в одном <video> теге. Браузер попробует каждый из них, начиная с первого. В этом примере показаны три кодировки. Вам нужно будет самостоятельно выполнить фактическое кодирование видео. Для поддержки нескольких браузеров вам потребуется несколько кодировок.

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

Может быть, уже слишком поздно, но вы здесь. вот некоторые элементы управления CSS, которые нравятся.

 video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}  

 <video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
    <source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>  

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

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

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