Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Разметка
После этого необходимого бизнес-окружения контейнеров, кодеков и проблем с лицензией, пришло время изучить разметку элемента video и его атрибутов.
Самый простой способ включить видео HTML5 в веб-страницу заключается в следующем:
<video src="example.webm"></video>
Как вы, вероятно, поняли из предыдущих разделов, это будет работать только в ограниченном количестве браузеров. Однако это минимальный код, необходимый для того, чтобы видео HTML5 работало в некоторой степени. В идеальном мире он работал бы везде — так же, как элемент img работает везде — но это еще далеко.
Подобно элементу img элемент video также может включать атрибуты width и height :
<video src = «example.webm» width = «375» height = «280»> </ video>
Несмотря на то, что размеры могут быть установлены в разметке, они не будут влиять на соотношение сторон видео. Например, если видео в предыдущем примере было на самом деле 375 × 240, а разметка была такой, как показано, видео будет центрировано по вертикали в пределах 280-пиксельного пространства, указанного в HTML. Это предотвращает ненужное растяжение видео и его искажение.
Атрибуты width и height принимают только целые числа, а их значения всегда в пикселях. Естественно, эти значения могут быть переопределены с помощью сценариев или CSS.
Включение нативных элементов управления
Ни одно встроенное видео не будет полным без предоставления пользователю возможности воспроизводить, приостанавливать, останавливать, просматривать видео или регулировать громкость. Элемент video HTML5 включает атрибут controls который делает именно это:
<video src="example.webm" width="375" height="280" controls></video>
controls — это логический атрибут, поэтому значение не требуется. Его включение в разметку говорит браузеру сделать элементы управления видимыми и доступными для пользователя.
Каждый браузер отвечает за внешний вид встроенных элементов управления видео. Рисунок 5.1 и Рисунок 5.2 показывают, как эти элементы управления отличаются от браузера к браузеру.
Рисунок 5.1. Родные элементы управления видео в Chrome
Рисунок 5.2. … В Firefox
Рисунок 5.3. … В Internet Explorer
Рисунок 5.4. … И в Опере
Атрибут autoplay
Мы хотели бы опустить ссылку на этот конкретный атрибут, поскольку его использование по большей части нежелательно; Однако есть случаи, когда это может быть уместно. Логический autoplay делает именно то, что подразумевает его имя: он сообщает веб-странице о необходимости немедленно воспроизвести видео.
Обычно это плохая практика; большинство из нас слишком хорошо знают, как это может быть неприятно, если веб-сайт начинает воспроизводить видео или аудио сразу после загрузки, особенно если наши колонки включены. Передовой опыт в области юзабилити требует, чтобы звуки и движения на веб-страницах запускались только по запросу пользователя. Но это не означает, что autoplay никогда не должен использоваться.
Например, если рассматриваемая страница не содержит ничего, кроме видео, то есть пользователь щелкнул ссылку на страницу с единственной целью просмотра конкретного видео, — может быть приемлемо, чтобы оно воспроизводилось автоматически, в зависимости от видео. размер, окружающий контент, платформа просмотра и аудитория.
Вот как бы вы использовали этот атрибут:
<video src="example.webm" width="375" height="280" controls ↵autoplay></video>
Предупреждение: мобильные браузеры игнорируют autoplay
Многие, если не все, мобильные браузеры будут игнорировать autoplay , поэтому видео всегда будет ждать, пока пользователь нажмет кнопку воспроизведения, прежде чем начать. Это разумно, учитывая, что пропускная способность мобильной связи часто ограничена и дорога.
Атрибут loop
Другим доступным атрибутом, который вы должны дважды подумать перед использованием, является логический атрибут loop . Опять же, это говорит само за себя: в соответствии со спецификацией, этот атрибут скажет браузеру «возвращаться к началу медиаресурса по достижении конца».
Поэтому, если вы создали веб-страницу, единственное намерение которой было раздражать своих посетителей, она может содержать такой код:
<video src="example.webm" width="375" height="280" controls autoplay ↵loop></video>
Автоигра и бесконечный цикл! Нам просто нужно убрать нативный контроль, и у нас будет трижды худших практик.
Конечно, как и в случае с autoplay , в некоторых ситуациях loop может быть полезен: например, браузерная игра, в которой окружающие звуки и музыка должны воспроизводиться непрерывно, когда страница открыта.
Атрибут предварительной загрузки
В отличие от двух ранее обсужденных атрибутов, preload , безусловно, удобна в ряде случаев. Атрибут preload принимает одно из трех значений:
-
auto:указывает, что видео и связанные с ним метаданные начнут загружаться до воспроизведения видео. Таким образом, браузер может начать воспроизведение видео быстрее, когда пользователь запрашивает его. -
none:указывает, что видео не должно загружаться в фоновом режиме до того, как пользователь нажмет на воспроизведение. -
metadata:работает как никто, за исключением того, что любые метаданные, связанные с видео (например, его размеры, продолжительность и т. д.), могут быть предварительно загружены, даже если само видео не будет.
Атрибут preload не имеет спецификации по умолчанию в тех случаях, когда он опущен; каждый браузер решает, какое из этих трех значений должно быть состоянием по умолчанию. Это имеет смысл, так как позволяет настольным браузерам на хороших соединениях автоматически загружать видео и / или метаданные автоматически, не оказывая реального неблагоприятного воздействия; все же это позволяет мобильным браузерам по умолчанию либо metadata или
none , так как многие мобильные пользователи имеют ограниченную полосу пропускания и предпочитают выбирать, загружать видео или нет.
Атрибут poster
Когда вы пытаетесь просмотреть видео в Интернете, обычно для отображения тизера его контента отображается один кадр видео. Атрибут poster позволяет легко выбрать такой тизер. Этот атрибут, аналогично src , будет указывать на файл изображения на сервере посредством URL.
Вот как будет выглядеть наш элемент video с определенным атрибутом poster :
<video src="example.webm" width="375" height="280" controls ↵poster="teaser.jpg"></video>
Если атрибут poster пропущен, то по умолчанию «poster» будет первым кадром видео, которое отображается сразу после его загрузки.
muted атрибут
Атрибут muted , Boolean, управляет состоянием звуковой дорожки по умолчанию для элемента video .
При добавлении этого атрибута звуковая дорожка видео по умолчанию отключается, что может привести к переопределению любых пользовательских настроек. Это будет
управлять только состоянием элемента по умолчанию — пользователь взаимодействует с
элементы управления или JavaScript могут изменить это.
Вот это добавлено к нашему элементу video :
<video src="example.webm" width="375" height="280" poster= ↵"teaser.jpg" muted></video>
В предыдущих версиях спецификации HTML5 был атрибут с именем audio который принимал значение muted . Новый атрибут muted заменяет атрибут audio , который теперь устарел.
Добавление поддержки нескольких видеоформатов
Как мы уже говорили, в настоящее время нет возможности использовать один контейнерный формат для показа вашего видео, хотя на самом деле это идея видеоэлемента, и мы надеемся, что она будет реализована в ближайшем будущем. Чтобы включить несколько видеоформатов, элемент video позволяет определять source элементы, так что вы можете разрешить каждому браузеру отображать видео в выбранном формате. Эти элементы выполняют ту же функцию, что и атрибут src в элементе video , поэтому, если вы предоставляете source элементы, нет необходимости указывать src для вашего элемента video .
Чтобы добиться полной поддержки браузера, вот как мы объявим наши source элементы:
<source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <source src="example.ogv" type="video/ogg">
source элемент (как ни странно) принимает атрибут src который указывает местоположение видеофайла. Он также принимает атрибут type который определяет формат контейнера для запрашиваемого ресурса. Этот последний атрибут позволяет браузеру определить, может ли он воспроизводить рассматриваемый файл, предотвращая тем самым ненужную загрузку неподдерживаемого формата.
Атрибут type позволяет также указать параметр кодека, который определяет видео и аудио кодеки для запрошенного файла. Вот как будут выглядеть наши source элементы с указанными кодеками:
Вы заметите, что синтаксис для атрибута type был немного изменен, чтобы приспособить значения контейнера и кодека. Двойные кавычки, окружающие значения, изменились на одинарные кавычки, а другой набор вложенных двойных кавычек включен специально для кодеков.
На первый взгляд это может немного запутать, но в большинстве случаев вы будете просто копировать и вставлять эти значения, когда у вас есть метод set для кодирования видео (о котором мы поговорим позже в этой главе). Важным моментом является то, что вы определяете правильные значения для указанного файла, чтобы гарантировать, что браузер может определить, какой (если есть) файл он может воспроизводить.
Примечание: какие форматы вам нужны?
В зависимости от целевой аудитории вашего сайта вам может не потребоваться три source элемента для полной поддержки браузера. Поддержка видео и аудио кодеков и контейнеров превосходна, и вам может понадобиться только одна или две комбинации. Чтобы помочь вам решить, какие форматы использовать, обязательно ознакомьтесь с последней информацией о поддержке браузера, которую можно использовать.
Источник заказа
Три source элемента размещаются как дочерние элементы элемента video , и браузер, используемый для визуализации HTML, будет выбирать любой формат контейнера / кодека, который он распознает, — загружая только те ресурсы, которые ему нужны, и игнорируя остальные. С объявленными нашими тремя форматами файлов наш код будет выглядеть так:
<video width="375" height="280" poster="teaser.jpg" audio="muted"> <source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, ↵mp4a.40.2"'> <source src="example.webm" type='video/webm; codecs="vp8, ↵vorbis"'> <source src="example.ogv" type='video/ogg; codecs="theora, ↵vorbis"'> </video>
Вы заметите, что наш код теперь без атрибута src в элементе video . Как уже упоминалось, он не только является избыточным, но и переопределяет любые видеофайлы, определенные в source элементах, поэтому в этом случае необходимо его исключить.
А как насчет браузеров без поддержки видео HTML5?
Три source элемента, которые мы включили в наш элемент video будут охватывать все современные браузеры, но мы еще не уверены, что наше видео будет воспроизводиться для более старых браузеров. Как уже упоминалось, у вас все еще может быть значительный процент пользователей, использующих браузеры без встроенной поддержки видео HTML5. Большинство из этих пользователей используют некоторые версии Internet Explorer до версии 9.
В соответствии с принципом постепенной деградации,
Элемент video был разработан так, чтобы старше
браузеры могут получить доступ к видео некоторыми альтернативными способами. Любые браузеры, которые
не распознать элемент video будет просто
игнорируйте это, наряду с его source детьми. Но если
video элемент содержит контент, который браузер
распознает как действительный HTML, он будет читать и отображать этот контент
вместо.
Какого рода контент мы можем обслуживать тем не поддерживающим браузерам? По данным Adobe, более миллиарда пользователей настольных компьютеров имеют установленный плагин Flash Player в своих системах. И большинство из этих экземпляров плагина Flash версии 9 или выше, которые предлагают поддержку формата видео контейнера MPEG-4. Имея это в виду, чтобы позволить Internet Explorer 8 и более ранним версиям (и другим более старым браузерам без поддержки видео HTML5) воспроизводить наше видео, мы можем объявить встроенное Flash-видео для использования в качестве запасного варианта. Вот законченный код для видео на The HTML5 Herald с включенным запасным кодом Flash:
<video width="375" height="280" poster="teaser.jpg" audio="muted"> <source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, ↵mp4a.40.2"'> <source src="example.webm" type='video/webm; codecs="vp8, ↵vorbis"'> <source src="example.ogv" type='video/ogg; codecs="theora, ↵vorbis"'> <!-- fallback to Flash: --> <object width="375" height="280" type="application/x-shockwave- ↵flash" data="mediaplayer-5.5/player.swf"> <param name="movie" value="mediaplayer-5.5/player.swf"> <param name="allowFullScreen" value="true"> <param name="wmode" value="transparent"> <param name="flashvars" value="controlbar=over&image=images/ ↵teaser.jpg&file=example.mp4"> <!-- fallback image --> <img src="teaser.jpg" width="375" height="280" alt="" title="No ↵video playback capabilities"> </object> </video>
Мы пропустим все детали того, как работает этот добавленный код (в конце концов, это не книга Flash), но вот несколько моментов, которые стоит отметить относительно этого дополнения к нашей разметке:
- Атрибуты
widthиheightв элементеobjectдолжны быть такими же, как и в элементеvideo. - Для воспроизведения файла мы используем JW Player с открытым исходным кодом от LongTail Video, который является бесплатным для некоммерческого использования, но вы можете использовать любой видео плеер, который предпочитаете.
- Видеокод Flash имеет собственный запасной вариант — файл изображения, который отображается, если код для видеоролика Flash не работает.
- Четвертый элемент param определяет используемый файл (example.mp4). Как уже упоминалось, большинство экземпляров проигрывателя Flash теперь поддерживают воспроизведение видео с использованием формата контейнера MPEG-4, поэтому нет необходимости кодировать другой формат видео.
- Браузеры с поддержкой HTML5, поддерживающие видео в формате HTML5, инструктируются о том, что они должны игнорировать любой контент внутри элемента видео, который не является тегом источника, поэтому резервный вариант безопасен во всех браузерах.
В дополнение к резервному содержимому Flash вы также можете предоставить дополнительную ссылку для загрузки видео, которая позволяет пользователю получить доступ к локальной копии видео и просматривать его на досуге. Это гарантирует, что никто не останется без средств для просмотра видео.
Последнее, что следует упомянуть, это то, что, как и в случае с дополнительными source элементами, у вас может не быть посетителей из браузеров без поддержки видео HTML5 на вашем веб-сайте, или вы можете не беспокоиться о небольшом проценте использования старых браузеров. В любом из этих случаев вы можете легко пропустить резервный контент Flash и, таким образом, упростить код.