Video tag html5: HTML5 Video Events and API

Содержание

Тег видео в HTML5

В этой статье я собираюсь описать тег видео в HTML5.

Тег видео

Одной из замечательных особенностей HTML5 является тег

Видеотег HTML5 принимает атрибут, указывающий, как должно воспроизводиться видео. Вы можете писать контент в теге

Синтаксис

Синтаксис тега

<Видео src = "url">

или

<Видео>

<Источник SRC = "URL">

Поддержка браузера

Такие браузеры, как Opera, Chrome, Internet Explorer 9, Firefox и Safari, поддерживают тег

Internet Explorer 8 и более ранние версии не поддерживают тег

В настоящее время для элемента

Браузеры	МР4	ВебМ	Огг
Internet Explorer 9+	ДА	НЕТ	НЕТ
Хром 6+	ДА	ДА	ДА
Firefox 3.6+	НЕТ	ДА	ДА
Сафари 5+	ДА	НЕТ	НЕТ
Опера 10.6+	НЕТ	ДА	ДА

Mime-типы для видеоформата

Формат	MIME-тип
MP4	видео/mp4
ВебМ	видео/вебм
Огг	видео/огг

Атрибуты тега

Атрибут	Значение	Описание
автовоспроизведение	автовоспроизведение	Видео начнет воспроизводиться автоматически.
автобуфер	автобуфер	Буферизация видео начнется автоматически.
петля	петля	После завершения видео автоматически запускается заново.
органы управления	элементы управления	Чтобы показать элементы управления.
плакат	URL изображения	URL(адрес) изображения.
источник	URL-адрес	Адрес видео.
ширина	пиксель	Определение ширины видео.
высота	пиксель	Определение высоты видео.

Пример тега

Шаг 10262

w3.org/1999/xhtml»>

< title>Тег видео в HTML5

Реализация тега видео в HTML5

Вы читаете, потому что ваш браузер не поддерживает видео элемент HTML5

Вывод

Встроенное содержимое: видео, аудио и холст

В HTML5 представлено множество новых тегов, чтобы соответствовать все более интерактивному и мультимедийному характеру Интернета. Хотя существует множество способов встраивания видео , аудио и динамические изображения в прошлом, новый веб-стандарт пытается сделать это проще, согласованнее и надежнее.

Простейшим встроенным (чужим) контентом является изображение, накладываемое на веб-страницу с элементом img . В былые времена объект вместе с различными плагинами и проприетарной дьявольской пылью использовался для того, чтобы разбивать и разбивать видео и аудио в представлении. Хотя и не без проблем (совместимости), теперь существует гораздо лучший метод использования различных типов мультимедиа на веб-страницах.

Видео

Элементы

Бам. Ну вот. Просто так. Простой.

Это позволит встроить видео вместе с элементами управления в браузеры, которые поддерживают тег HTML5 video и тип видеоконтента.

Хотя HTML5 настаивает на стандартной структуре для воспроизведения мультимедиа, сами мультимедиа не стандартизированы для разных браузеров. На практике это означает, что маловероятно, что все посетители смогут просмотреть ваш видео (или аудио) файл. Некоторые поддерживают 9Например, видео 0023 WebM , в то время как другие поддерживают MPEG . Однако не теряйте из-за этого слишком много сна — см. «Альтернативный контент» ниже.

Атрибут Controls является необязательным, но если он вам не нужен — если вы действительно хотите лишить пользователя контроля — вы можете просто добавить атрибут autoplay :

Это будет воспроизводить видео при загрузке страницы, не будет отображать никаких элементов управления и, скорее всего, будет чертовски раздражать ваших посетителей. Конечно, вы могли бы, если будете добры, поставить оба управляет атрибутами и автозапуска .

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

Другие основные атрибуты в вашем распоряжении включают ширина , высота , петля и приглушенный .

Если вы настаиваете на использовании автозапуска , принося отключает звук (и контролирует ) на вечеринку, а также является хорошим жестом и соглашением, которое используют многие сайты.

Например, если у вас есть видео в рядом с , оно может начать воспроизводиться, но затем пользователь может выбрать его, отключив звук видео с помощью элементов управления, если они выберут, уменьшая вероятность раздражения.

Плакат

Вы можете указать замещающее изображение , которое будет отображаться перед воспроизведением видео, с постером атрибут.

Элементы

Указанное изображение будет растягиваться или сжиматься в соответствии с размерами видео, независимо от исходного размера изображения.

Резервный контент

Итак, да, есть открывающий и закрывающий тег. Что может быть между ними? Почему, запасной контент: контент, который отображается, если браузер не понимает элемент

видео . Это может быть несколько слов, кусок HTML или «очень забавное» и «очень оригинальное» изображение Lolcats.

<управление видео src="kitties. mp4">

Альтернативный контент

Как уже отмечалось, нам нужно беспокоиться не только о совместимости с тегом, но и о совместимости с самим исходным видео. К счастью, с элементом source может быть предложено более одного исходного видеофайла вместе с указанием требований к файлу в значении 9.0314 тип атрибут. Затем браузер возьмет первый, который ему нравится.

<управление видео>

Браузер не похож на HTML 5.

Здесь браузер должен выяснить, может ли он обрабатывать MIME-тип «video/mp4» и есть ли у него указанный кодек для его расшифровки. Если это не так, он должен перейти к следующему и повторить попытку с деталями, изложенными во втором источник элемент.

Аудио

Применение звука аналогично применению видео. При использовании тега audio структура такая же, как при использовании video , а атрибуты src , Controls , autoplay и loop могут использоваться одинаково.

<управление аудио src="meow_mix.mp3">
    Ваш дурацкий браузер не поддерживает аудио HTML 5.

Альтернативный контент также может быть определен точно так же, как с видео и источник

теги.

Гораздо больший контроль над видео и аудио можно осуществлять с помощью JavaScript, с возможностью более подробного управления аспектами воспроизведения и пользовательскими элементами управления.

Холст

Основным дополнением к HTML5 является элемент canvas . Он предназначен для предоставления холста, на котором можно использовать JavaScript для рисования всевозможных динамических изображений, таких как графики, анимированные спрайты или изображения сумасшедших кошек.