Видео 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 не так легко!

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

В этой главе CodeW3C.comsummaryирует вопросы и методы их решения.

Использование тега <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 различных формата видео. Элемент <video> HTML 5 будет пытаться воспроизвести видео в формате 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> Теги определяют встроенный контент, например, плагины.