Видео 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> Теги определяют встроенный контент, например, плагины.