Урок [HTML5] Видео

[Mathian]

Многие современные вебсайты показывают видео. HTML5 обеспечивает стандарт для поддержки видео.

Видео в Интернете
Прежде не было единого стандарта для демонстрации видео на веб странице.
Сегодня большинство видеоклипов воспроизводятся посредством плагинов (например flash). Однако, не все браузеры имеют одни и те же плагины.
HTML5 определяет стандартный способ включения видео - с помощью элемента video.

Видео Форматы
На текущий момент, существует 3 поддерживаемых видео формата для элемента video:

• Ogg = Ogg файлы с видео кодеком Theora и аудио кодеком Vorbis
• MPEG 4 = MPEG 4 файлы с видео кодеком H.264 и аудио кодеком AAC
• WebM = WebM файлы с видео кодеком VP8 и аудио кодеком Vorbis

Как Это Работает
Вот все что требуется для воспроизведения видео в HTML5:

<video src="movie.ogg" controls="controls">
</video>

Атрибут control - для добавления кнопок play (воспроизведение), pause (пауза), и volume (громкость).
Также желательно добавлять атрибуты width (ширина) и height (высота).
Вставьте альтернативный контент между тегами <video> и </video> для браузеров, которые не поддерживают элемент video:

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

Пример выше использует Ogg файл и будет работать в Firefox, Opera и Chrome.
Чтобы видеоклип работал также и в Internet Explorer, Safari и будущих версиях Chrome, мы должны добавить файлы MPEG4 и WebM.

Элемент video допускает несколько элементов-источников source. Элементы-источники могут ссылаться на различные видео файлы. Браузер выберет первый распознаваемый формат:

<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>