HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

Урок 3 Видео в HTML5


« Назад Далее »

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

Поддерживает ли ваш браузер видео HTML5?



Видео в Интернете

Прежде не было единого стандарта для демонстрации видео на веб странице.

Сегодня большинство видеоклипов воспроизводятся посредством плагинов (например flash). Однако, не все браузеры имеют одни и те же плагины.

HTML5 определяет стандартный способ включения видео - с помощью элемента video.


Видео Форматы

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

Формат IE Firefox Opera Chrome Safari
Ogg Нет 3.5+ 10.5+ 5.0+ Нет
MPEG 4 9.0+ Нет Нет 5.0+ 3.0+
WebM Нет 4.0+ 10.6+ 6.0+ Нет
  • Ogg = Ogg файлы с видео кодеком Theora и аудио кодеком Vorbis
  • MPEG4 = 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>

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


Все <video> Атрибуты

Атрибут Значение Описание
audio muted Определение состояния аудио по умолчанию. На данный момент, допустимо только "muted"
autoplay autoplay Если указан, то видео начнет воспроизводиться как только будет готово к воспроизведению
controls controls Если указан, кнопки управления (кнопка play и другие) будут показаны
height пикселы Устанавливает высоту видеоплеера
loop loop Если указан, то видео будет воспроизводиться снова и снова
poster адрес url Указывает адрес изображения, представляющего видеоклип
preload preload Если указан, видео будет загружаться при загрузке страницы и сразу готово к запуску. Игнорируется, если "autoplay" присутствует
src адрес url Адрес URL видеоклипа для воспроизведения
width пикселы Установка ширины видеоплеера





« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru