Видео HTML

Существует множество способов воспроизведения видео в HTML.

Пример

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Попробуйте сами

Вопросы, вопросы и методы их решения

Воспроизведение видео в HTML не так просто!

Вам нужно знать множество навыков, чтобы убедиться, что ваши видео файлы могут быть воспроизведены во всех браузерах (Internet Explorer, Chrome, Firefox, Safari, Opera) и на всех устройствах (PC, Mac, iPad, iPhone).

В этой главе CodeW3C.com总结了 вопросы и методы их решения.

Использование тега <embed>

Тег <embed> предназначен для внедрения мультимедийных элементов в страницу HTML.

Ниже приведен фрагмент HTML, показывающий внедрение в веб-страницу видео Flash:

Пример

<embed src="movie.swf" height="200" width="200"/>

Попробуйте сами

Проблема

  • HTML4 не может распознать тег <embed>. Ваша страница не может быть проверена.
  • Если браузер не поддерживает Flash, видео не будет воспроизводиться
  • iPad и iPhone не могут показывать видео Flash.
  • Если вы преобразуете видео в другой формат, оно все равно не сможет быть воспроизведено во всех браузерах.

Использование тега <object>

Тег <object> предназначен для внедрения мультимедийных элементов в страницу HTML.

Ниже приведен фрагмент HTML, показывающий嵌入 в веб-страницу фрагмент видео Flash:

Пример

<object data="movie.swf" height="200" width="200"/>

Попробуйте сами

Проблема

  • Если браузер не поддерживает Flash, видео не будет воспроизводиться.
  • iPad и iPhone не могут показывать видео Flash.
  • Если вы преобразуете видео в другой формат, оно все равно не сможет быть воспроизведено во всех браузерах.

Использование тега <video>

Элемент <video> является новым тегом в HTML 5.

Элемент <video> используется для вставки видеоэлементов в веб-страницу HTML.

Следующий фрагмент HTML отобразит вставленное в веб-страницу видео в формате ogg, mp4 или webm:

Пример

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Ваш браузер не поддерживает тег video.
</video>

Попробуйте сами

Проблема

  • Вам нужно будет конвертировать видео в множество различных форматов.
  • Элемент <video> не работает в старых браузерах.
  • <video> элемент не может быть проверен по HTML 4 и XHTML.

Лучшее решение HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Попробуйте сами

В примере используется 4 различных формата видео. Элемент HTML 5 <video> будет пытаться воспроизвести видео в формате mp4, ogg или webm. Если все попытки будут неудачными,则会 перейти к элементу <embed>.

Проблема

  • Вам нужно будет конвертировать видео в множество различных форматов
  • <video> элемент не может быть проверен по HTML 4 и XHTML.
  • <embed> элемент не может быть проверен по HTML 4 и XHTML.

Примечание:Используйте <!DOCTYPE html> (HTML5) для решения проблемы проверки.

Решение Youku

Самый простой способ отобразить видео в HTML - это использовать такие видеохостинги, как Youku.

Если вы хотите воспроизвести видео на веб-странице, вы можете загрузить видео на такие видеохостинги, как Youku, и затем вставить HTML-код на свою веб-страницу, чтобы воспроизвести видео:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Попробуйте сами

Использование гиперссылок

Если веб-страница содержит ссылки на медиафайлы, большинство браузеров будут использовать "дополнительное приложение" для воспроизведения файлов.

Следующий фрагмент кода показывает ссылку на файл AVI. Если пользователь нажмет на эту ссылку, браузер запустит "дополнительное приложение", например, Windows Media Player, чтобы воспроизвести этот файл AVI:

Пример

<a href="movie.swf">Воспроизвести файл видео</a>

Попробуйте сами

Комментарий о встроенном видео

Когда видео включается в веб-страницу, его называют встроенным видео.

Если вы планируете использовать встроенное видео в веб-приложении, вы должны осознавать, что многие считают встроенное видео раздражающим.

Важно также отметить, что пользователи могут уже отключить опции встроенного видео в браузере.

Наши лучшие советы - включать их только в тех случаях, когда пользователь хочет видеть встроенное видео. Пример: пользователь хочет увидеть видео и кликнуть по ссылке, открывающей страницу и воспроизводящей видео.

Мультимедийные теги HTML 4.01

Тег Описание
<applet> Не рекомендуется.Определяет встроенный applet.
<embed> Не рекомендуется.Определяет встроенный объект (разрешено в HTML5).
<object> Определяет встроенный объект.
<param> Определяет параметры объекта.

Мультимедийные теги HTML 5

Тег Описание
<video> Тег определяет звук, например, музыку или другой аудиопоток.
<embed> Теги определяют встроенный контент, например, плагины.