Для того чтобы мы могли ненадолго вспомнить, вот пример того, как обычно встраивают видео на веб-страницу:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Такой синтаксис, конечно же, далек от совершенства.
Но, даже если мы временно не обращаем внимания на аспект эстетики: синтаксис в этой форме является слишком ошибочным и сложным. В HTML5 встраивание видео гораздо проще. Для этого используется элемент video.
Вот пример того, как встраивается именно этот элемент video:
<video src="video.ogv" width="300" height="200"> Ваш браузер к сожалению не поддерживает HTML5 </video>
Это простейший вариант. Три атрибута критичны для этой формы синтаксиса. Через src указывается путь к видео. Обратите особое внимание на правильную указание пути. Два других атрибута width и height определяют ширину и высоту видео. Если ни один из этих значений не указан, видео отобразится в своем оригинальном размере. Если указан только один из значений, другое значение будет автоматически рассчитано браузером. Атрибут autoplay указывает браузеру автоматически стартовать видео после загрузки страницы. Обычно этот атрибут не рекомендуется устанавливать, так как автоматическое воспроизведение обычно не желательно для пользователей, особенно тех, кто использует мобильные устройства с низкой пропускной способностью.
Другим интересным атрибутом является controls. Если он используется, браузер показывает стандартные элементы управления воспроизведением и громкостью.
<video src="video.ogv" width="300" height="200" controls> Ваш браузер к сожалению не поддерживает HTML5 </video>
Вот результат в браузере:
Через появившуюся панель управления можно не только приостановить и снова начать воспроизведение видео, но также в ней содержится регулятор громкости.
Вы можете указать изображение через атрибут poster, которое будет отображаться до начала воспроизведения видео. Для этого используется атрибут poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Ваш браузер к сожалению не поддерживает HTML5 </video>
Также здесь важно правильно указать путь, чтобы изображение действительно было видно.
Будьте осторожны при использовании атрибута autoplay. Этот атрибут указывает, что видео должно автоматически воспроизводиться после его доступности.
<video src="video.ogv" width="300" height="200" autoplay> Ваш браузер к сожалению не поддерживает HTML5 </video>
С точки зрения трафика, атрибут preload может быть интересен. Этот атрибут управляет предзагрузкой. Атрибут может принимать следующие значения:
• auto – Браузер может предзагрузить весь файл.
• none – Файл не должен быть предзагружен.
• metadata – Файл можно предзагрузить.
Если атрибут preload отсутствует, применяются настройки по умолчанию браузера.
Видео и кодеки
Кто-то, кто изучает встраивание и воспроизведение видео на веб-страницах, рано или поздно столкнется с проблемой различных кодеков. Благодаря этим кодекам видео могут быть эффективно сжаты и расжаты. Проблема заключается в том, что производители браузеров до сих пор не могли прийти к соглашению по поводу общего формата кодека. Для HTML5 (и, следовательно, для вас) это означает, что нет общих кодеков для видео и аудиофайлов.
Для видео на данный момент установились два формата: Ogg и MP4. Поэтому вы всегда будете на безопасной стороне, если предложите видео в этих двух форматах. Для этого video-элементу назначаются два элемента source.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Таким образом, вы не указываете видеоисточник внутри элемента video. Вместо этого там делаются только общие сведения о представлении. Какое видео должно быть показано, определяется через элемент source. Aтрибут src присваивает соответствующее видео. За type следует указание, о каком видео идет речь или в каком формате представлено видео.
Если указано несколько элементов source, браузер всегда воспроизводит первое видео, которое "подходит". Что такое "подходит", описано ниже.
Какие форматы поддерживает какой браузер? Ответ на этот вопрос дает следующая таблица.
| Браузер | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | С версии 9 | |
| Mozilla Firefox | Да | |
| Google Chrome | Да | Да |
| Opera | Да | |
| Safari | Да | |
| iPhone | Да | |
| Android | Да |
Таблица ясно показывает дилемму: интерпретация форматов почти равномерно распределена между различными браузерами. Поэтому практически приходится указывать видео в обоих форматах.
С помощью атрибута media, который можно присвоить только элементу source, можно указать, для какого типа носителя подходит видео. Чтобы указать видео специально для определенных устройств, атрибут media присваивается атрибуту src. С помощью этого атрибута media указывается желаемый тип медиа.
Возможное применение элемента source может выглядеть следующим образом:
<video width="400" height="300">
<!-- Только для мобильных устройств -->
<source src="video_mobil.ogg" media="handheld" />
<!—Все остальные устройства -->
<source src="video_normal.ogg" media="all" />
</video>
Здесь, с помощью атрибута media, проверяется, является ли устройство мобильным. В этом случае воспроизводится видео меньшего размера. Если это другое устройство, используется значение all.
Безопасное встраивание видео
HTML5, как известно, пока далеко не поддерживается всеми браузерами. Это, конечно же, относится и к элементу video. Решение предлагает комбинация различных методик встраивания. При этом используются хорошо известные элементы object и embed в сочетании с элементом video. Это может выглядеть следующим образом:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Такие видео, встроенные таким образом, будут воспроизводиться в большинстве браузеров. Браузеры, знающие элемент video, используют его. Другие браузеры, напротив, используют данные в элементе object или в элементе embed.
