Html5 тег video: Атрибут autoplay | htmlbook.ru

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)

22.08.2019

Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.

В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорит «mp4-стриминг».

Термины

HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src.

Пример HTML-5 видео

<video>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает видео тэг.
</video>

HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг. Кстати, HTML5 произносится как аш-ти-эм-эль5, а не хтмл5.

Тегу <video> неважно, как видеопоток формируется и передаётся, и сможет ли браузер его проиграть. Главное, чтобы в src была ссылка на какой-то видеопоток. Говоря техническим языком, спецификация ничего не говорит о том, какие протоколы, транспорты и кодеки поддерживаются в HTML5-видео.

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

Протокол обычно подразумевает хотя бы команду Play (начать проигрывание), но иногда есть и расширенные варианты: пауза, продолжение, публикация, перемотка и т.п.

Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.

Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).

Примеры контейнеров: MPEG-TS, RTMP, RTP.

Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должныслать друг другу стороны, чтобы видео потекло (т.е. протокол), и того, какупаковывать видео (т.е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.

Кодек

— многозначный термин. Здесь он означает способ сжать сырое видео. Разница между кодеком и транспортом в том, что кодек — это про подготовку видео, а транспорт — про передачу видео по протоколу. Видео, сжатое одним кодеком, можно пересылать по разными протоколам и разными транспортами. Большинство видеостриминговых серверов не залезают глубже кодированного видео и оперируют только протоколами и транспортами.

Примеры кодеков: h364, aac, mp3.

Из-за того, что термин многозначный, возникает путаница с названиями. Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало > байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.

Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.

При этом есть комбинации, которые поддерживаются значительной частью браузеров. Рассмотрим самые перспективные.

HLS

HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.

Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на Айос и Маке. До сих пор даже Сафари на Винде не умеет играть HLS. Тем не менее, сейчас HLS умеют проигрывать все телевизионные приставки и даже почти все устройства на Андроиде.

Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.

MPEG-DASH

MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.

MPEG-DASH во многом похож на HLS. Возможно, он даже популярнее, ведь такие гиганты как Ютуб и Нетфликс уже несколько лет используют его как основной способ раздачи контента.

MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.

Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.

MSE

Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).

Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.

MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.

MPEG-DASH, созданный на его базе, ещё хитрее, поэтому работать с ними то ещё удовольствие: тонны XML, парсинг бинарных контейнеров в Яваскрипте, непродуманные на этапе дизайна вопросы нарезки на сегменты — всё как мы любим, всё что нужно для единой безглючной реализации во всех браузерах.

Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.

К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.

WebRTC

Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.

WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.

Технология не предназначена для стриминга, но в принципе может и его, так что было бы неправильно забыть про него. WebRTC тоже считается HTML5, потому что вроде как ничего кроме Яваскрипта в браузере не требует. Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.

Путаницу в понимании WebRTC вносит его использование в торрент-доставке телевидения. Суть в том, что браузеры через WebRTC организуют сеть каналов данных, а дальше по этой сети раздаются HLS- или MSE-сегменты видео, а проигрывание происходит через Флеш или MSE. Т.е. WebRTC — для доставки, MSE — для проигрывания.

Важно не путать это с использованием WebRTC для проигрывания видео.

Так что там с mp4-стримингом?

Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac. И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).

Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a.k.a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».

Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами. Это называется mp4 fragmented, или mp4 streaming.

По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».

Выводы

• Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
• Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
• WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.
• Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
• Никогда не говорите «mp4 стриминг». Пожалуйста.

Это может быть интересно:

1. How to make IPTV service from scratch
2. Флюссоник DVR

Знайте HTML5 видео теги и расширение источника мультимедиа MSE

Теги:  видео  MSE  HTML5

Текущая веб-страница может искать содержимое, связанное с HTML5 и MSE, цель этой статьи — использовать более короткое пространство, кратко опишите расширение MSE HTML5. Это также величайшие сомнения, когда я начал обращаться к контенту, я надеюсь помочь всем, если произойдет ошибка, пожалуйста, исправьте его.

W3C：World Wide Web Consortium — это крупная международная стандартная организация, которая запустила серию основных стандартов: HTML, CSS, XML, SVG и т. Д., Пожалуйста, запомните эту организацию, Интернет разработал на этот уровень, компания не работает.

HTML5: Это последняя версия HTML (гипертекстовый язык разметки), запускаемый W3C. Веб-страница находится на HTML-языке. Какое содержимое включено в веб-страницу; когда мы упоминаем технологию HTML5, она содержит HTML5, CSS, JavaScript: где CSS отвечает за макет страницы, JavaScript отвечает за взаимодействие с пользователями.

MSE: Расширение исходного медиа, расширение источника мультимедиа является стандартом для операций по потоковым носителям в носителе HTML5 (воспроизведение на уровне пользователя). В области компьютера стандартные слова и технологии решение эквивалентно.

В прошлом пользователи должны использовать такие плагины, как Adobe Flash или Microsoft Silverlight, и им нужно поддерживать поддержку, а плагин, упомянутый ранее, это роль медиаплеер. Однако способ использовать плагин очень неудобный и небезопасный, некоторые преступники будут двигать своими руками на эти плагины. Следовательно, в последних стандартах HTML5 для W3C определяют новый элемент, чтобы избежать использования плагинов, которые содержат знаменитый элемент тега «тега».

Он использует тег <VIDEO>, который поддерживает браузер HTML5 для реализации подключаемого в совокупность воспроизведения в совокупности в совокупности в совокупности совокупности, но формат медиа-контента ограничен. Когда речь идет о контенте СМИ, он, естественно, должен говорить о формате медиапатизации и формата и формата кодирования средств массовой информации. Он суммирует его, исходный видео файл сжимается путем кодирования размера файла, а затем сжатый аудио, субтитры объединяют в Контейнер, конкретный контент Пожалуйста, проверьте его.

Мы можем видеть тег <VIDEO> для создания браузера с помощью уклончивых и функций декодирования поставляется с игроком. Благодаря разработке видео по запросу, прямой трансляции, видео проходит через потоковые протоколы передачи средств массовой информации (в настоящее время обычно используются MPEG-DASH и ABLES) с сторон сервера к клиенту, носитель дополнительно включен в один слой передачи. Соглашение, это <видео> не может быть идентифицировано. Принимая HLS в качестве примера, содержимое исходного файла диспергировано в файл TS, как показано на следующем рисунке, изображение происходит из сети, вторжения.

Этот тип файла TS не распознается тегом <VIDEO>, затем представляя расширение MSE, чтобы помочь браузеру идентифицировать и обрабатывать файл TS, измените его обратно в изначально идентифицируемый формат контейнера для мультимедиа, поэтому <Video> может идентифицировать и играть исходный файл. Затем браузер, который поддерживает HTML5, эквивалентен встроенному игроку, способным разрешать протокол потока, а процесс процесса через файл формата потокового носителя показан ниже.

Источник изображения[Сводка] Видео- Жилая технология декодирования Нулевой базовый метод обученияНекоторые студенты, которые сомнительно в видео и аудиокодировке могут указать ссылку。

---

Интеллектуальная рекомендация

Процесс производства логотипа

Ниже приведен процесс создания логотипа мной. Этот логотип создан с моим именем. Логотип, который я сделал, очень прост. Сначала нарисуйте эллипс, отключите цветовую заливку в верхнем левом углу, вклю…

Android — Вид события календаря, Добавить, Удалить

…

[ Archaius] Во-первых, простое и продвинутое использование Archaius

Чем меньше кода написано, тем меньше ошибок; если вы не напишете код, ошибок не будет -> Вернуться к общему списку столбцов <- Адрес загрузки кода:https://github. com/f641385712/netflix-learning …

The Hystrix timeout of 90001ms for the command service-w is set lower than the combination of t

The Hystrix timeout of 90001ms for the command service-w is set lower than the combination of the Ribbon read and connect timeout, 1080054ms.     Просто добавьте команду и установите время….

Функция Вызов вспомогательного класса

Иногда код должен загрузить функции в DLL, обычно это так: Но после прочтения «Углуженная приложение C ++ 11», обнаружено, что он также может быть упакован в вторичный класс, что удобнее в…

Вам также может понравиться

360 новый телефон бесполезно, используется на автомобиль зеркало заднего вида

 | Davidzh Произведено | AI Technology Camp (общедоступный номер ID: rgznai100) Последний новый продукт был выпущен в течение 5 месяцев, а 360 запустила N-серии N07. От взгляда, нет никакой разницы …

Скролл скриншот

———————————————— Частичная прокрутка страницы Скриншот 1. Нажмите, чтобы захватить окно прокрутки, как показано на рисунке   2. В соответствии с клавишей ctrl выбер…

Стиль плитки

Декоративная стена дома Сяо Мина изначально представляла собой небольшой квадрат 3 * 10. Теперь у меня есть партия прямоугольных плиток, которые покрывают только 2 небольших квадрата. Плитки имеют тол…

Глобальная проверка входа в ASP.NET MVC — глобальный фильтр действий

Подведите итог процесса написания глобального фильтра, используемого в проекте, пожалуйста, пропустите его, новичок может обратиться к нему, если есть ошибка, пожалуйста, укажите, спасибо Сначала созд…

Тестирование Unity ECS и JobSystem

При тестировании ECS было обнаружено, что онлайн-документы и учебные пособия, в том числе личные и официальные, не могут использоваться нормально. Причина в том, что в документе, в котором был написан…

Добавление видео и аудио с использованием HTML5

Буду с вами честен. Я всегда считал добавление мультимедиа на веб-страницы с использованием HTML 4. 01 настоящей мукой. Это не сложный, а просто запутанный процесс. HTML5 делает все значительно проще. Необходимый для этого синтаксис очень похож на тот, что используется для добавления изображений:

<video src=»myVideo. ogg»></video>

Это глоток свежего воздуха для большинства веб-дизайнеров! Вместо того чтобы писать объемный код, необходимый для включения видео в страницу, можно поручить тегу <video></video> (или тегу <audio></audio> для аудио) всю тяжелую работу. Можно также вставить примечание между открывающим и закрывающим тегами для уведомления пользователей на тот случай, если они будут применять несовместимые с HTML5 браузеры. Кроме того, имеются дополнительные атрибуты, например height и width. Добавим их:

<video src=»video/myVideo. mp4″>What, do you mean you don’t understand HTML5?</video>

Теперь, если мы вставим приведенный чуть выше фрагмент кода в разметку нашей страницы, а затем взглянем на нее в браузере Safari, то увидим, что элементы управления воспроизведением отсутствуют. Чтобы они отобразились по умолчанию, нам необходимо добавить атрибут controls. Можно также добавить атрибут autoplay (но делать это все же не рекомендуется, поскольку никому не нравится, когда воспроизведение видео запускается автоматически). Добавление названных атрибутов демонстрируется в следующем фрагменте кода:

<video src=»video/myVideo. mp4″ controls autoplay>What, do you mean you don’t understand HTML5?</video>

Результат применения приведенного чуть выше фрагмента кода показан На рисунке 4.6.

На нашей странице появилась область воспроизведения с загруженным видео.

К прочим атрибутам относится preload для управления предварительной загрузкой мультимедиа (разработчики, впервые использовавшие HTML5, должны обратить внимание на то, что атрибут preload пришел на смену autobuffer), loop для повторного воспроизведения видео и poster для определения кадра видео, который будет показан до начала воспроизведения. Последний атрибут окажется полезен, если в воспроизведении видео возможна задержка. Чтобы использовать тот или иной атрибут, нужно просто добавить его в соответствующий тег. Вот пример включения всех упоминавшихся чуть ранее атрибутов:

<video src=»video/myVideo. mp4″ controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>What, do you mean you don’t understand HTML5?</video>

Обеспечение альтернативных файлов-источников.

Первоначальная HTML5-спецификация предусматривала поддержку всеми браузерами прямого воспроизведения (без плагинов) видео и аудио в контейнерах Ogg. Однако из-за споров между участниками рабочей группы HTML5 требование по поводу поддержки Ogg (включая Theora-видео и Vorbis-аудио) в качестве базового стандарта было удалено из более поздних версий HTML5-спецификации. По этой причине сейчас одни браузеры поддерживают воспроизведение одного набора видео и аудиофайлов, а другие — другого. Например, Safari поддерживает использование в сочетании с элементами <video> и <audio> только медиа MP4/H.264/ AAC, в то время как Firefox и Opera поддерживают лишь Ogg и WebM.

К счастью, есть способ обеспечить поддержку разных форматов в одном теге. Однако это не избавит нас от необходимости создавать разные версии нашего мультимедиа. Хотя мы все и держим пальцы скрещенными в надежде на то, что текущая ситуация со временем разрешится, между тем, вооружившись разными версиями нашего файла, мы можем разметить <video> следующим образом:

<video controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>

<source src=»video/myVideo. ogv» type=»video/ogg»>

<source src=»video/myVideo. mp4″ type=»video/mp4″>

What, do you mean you don’t understand HTML5?

</video>

Если браузер поддерживает воспроизведение Ogg, то он будет использовать соответствующий файл; в противном случае браузер перейдет к следующему тегу <source>.

Резервные варианты для устаревших браузеров.

Использование тега <source> позволяет предусмотреть при необходимости несколько резервных вариантов. Например, наряду с обеспечением версий MP4 и Ogg мы, если потребуется включить подходящий резервный вариант для Internet Explorer версии 8 и ниже, можем добавить в качестве альтернативы Flash-видео. Более того, если у определенного пользователя не окажется подходящей технологии воспроизведения, мы можем предусмотреть для него ссылки на скачивание самих файлов:

<video controls autoplay preload=»auto» loop poster=»myVideoPoster. jpg»>

<source src=»video/myVideo. mp4″ type=»video/mp4″>

<source src=»video/myVideo. ogv» type=»video/ogg»>

<object type=»application/x-shockwaveflash» data=»myFlashVideo. SWF»>

<param name=»movie» value=»myFlashVideo. swf» />

<param name=»flashvars» value=»controlbar=over&amp;image=myVideoPoster. jpg&amp;file=video/myVideo. mp4″ />

<img src=»myVideoPoster. jpg» alt=» TITLE «

Title=»No video playback capabilities, please download the video below» /> </object>

<p> <b>Download Video:</b>

MP4 Format: <a href=»myVideo. mp4″>»MP4″</a>

Ogg Format: <a href=»myVideo. ogv»>»Ogg»</a>

</p>

</video>

Теги <audio> и <video> работают почти одинаково.

Тег <audio> работает по тому же принципу и с теми же атрибутами, что и <video>, не поддерживая лишь атрибуты width, height и poster. Да, вы можете использовать теги <video> и <audio> почти как взаимозаменяемые. Основное различие между ними заключается в том, что <audio> не имеет области воспроизведения для видимого содержимого.

Тег HTML5 video — Tutorial Republic

Advertisements

Тема: Теги HTML5 СправочникПредыдущая|Следующая

Описание

Элемент используется для встраивания видеоконтента в документ HTML без использования каких-либо дополнительных плагинов, таких как Flash player.

Поддержка элемента

Поддержка элемента зависит от браузера. На данный момент для видеоэлемента поддерживаются три основных видеоформата: MP4, Ogg и WebM.

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

Размещение:	Блок
Содержимое:	<источник> , <трек> и текст
Начальный/конечный тег:	Начальный тег: требуется , Конечный тег: требуется
Версия:	Новое в HTML5

---

Синтаксис

Основной синтаксис тега :

HTML / XHTML:

HTML / XHTML:

> Тег в действии.

Пример

Попробуйте этот код »

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

Видео с использованием набора элементов управления браузера по умолчанию и альтернативными источниками.

Пример

Попробуйте этот код »

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

Совет: Вы можете поместить содержимое, такое как текст или ссылку для скачивания, внутрь элемента видео, чтобы обеспечить альтернативное содержимое в случае, если браузер не поддерживает видеоконтент или по какой-то причине не удалось загрузить исходный файл видео.

---

Атрибуты, специфичные для тега

В следующей таблице показаны атрибуты, характерные для тега .

Атрибут	Значение	Описание
автовоспроизведение	автовоспроизведение	Этот логический атрибут указывает, что видео автоматически начнет воспроизводиться, как только оно сможет это сделать, не останавливаясь для завершения загрузки данных.
органы управления	органы управления	Если указано, браузеры будут отображать элементы управления, позволяющие пользователю управлять воспроизведением видео, например воспроизведение/пауза, громкость и т. д.
высота	пикселей	Устанавливает высоту области отображения видео.
петля	петля	Этот логический атрибут указывает, что видео будет автоматически начинаться заново по достижении конца.
приглушенный	приглушенный	Этот логический атрибут указывает, будет ли изначально отключено видео. Значение по умолчанию — false, что означает, что звук будет воспроизводиться при воспроизведении видео.
плакат	URL-адрес	Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается, пока не станет доступен первый кадр видео; затем первый кадр отображается как постер.
предварительная нагрузка	авто метаданные нет	Подсказывает браузеру, следует ли загружать само видео или его метаданные. Атрибут autoplay может переопределить этот атрибут, потому что если вы хотите автоматически воспроизводить видео, браузеру, очевидно, потребуется его загрузить.
источник	URL-адрес	Указывает расположение видеофайла для встраивания. Кроме того, вы можете использовать предпочтительный тег , так как он допускает несколько вариантов.
ширина	пикселей	Устанавливает ширину области отображения видео.

---

Глобальные атрибуты

Как и все другие теги HTML, тег поддерживает глобальные атрибуты в HTML5.

---

Атрибуты событий

Тег

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML5.

---

Совместимость с браузерами

Тег поддерживается всеми основными современными браузерами.

Базовая поддержка — Firefox 3.5+ Google Chrome 4+ Internet Explorer 9+ Apple Сафари 4+ Опера 10.5+

---

Дополнительная литература

См. руководство по: HTML5 Video, HTML5 Audio.

Связанные теги: <источник> , <трек> , <аудио> .

Предыдущая страница Следующая страница

Тег HTML 5

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

Тег HTML 5 принимает атрибуты, определяющие способ воспроизведения видео. Атрибуты включают предзагрузка , автовоспроизведение , цикл и многое другое. См. ниже полный список поддерживаемых атрибутов.

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

Тег был введен в HTML 5 (официально именуемый HTML5 — без пробела). Видео HTML5 в настоящее время широко реализовано в основных браузерах и поддерживается крупными веб-сайтами, такими как YouTube.

Пример

В этом примере показано использование тега .

Если вы видите элементы управления видео, но видео не воспроизводится, когда вы нажимаете кнопку «Воспроизвести», возможно, ваш браузер не поддерживает этот тип файла (например, Ogg ). В этом случае попробуйте тот же код, но с другим форматом файла.

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

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

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут	Описание
источник	Указывает расположение видеофайла. Его значение должно быть URI видеофайла.
crossorigin	Этот атрибут является атрибутом настроек CORS. CORS расшифровывается как Cross-Origin Resource Sharing . Назначение атрибута crossorigin — позволить вам настроить запросы CORS для извлеченных данных элемента. Перечислены значения атрибута crossorigin . Возможные значения: Значение Описание анонимный Запросы CORS из разных источников для элемента не будут иметь установленного флага учетных данных. Другими словами, не будет обмена учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию. use-credentials Запросы CORS между источниками для элемента будут иметь установленный флаг учетных данных. Если этот атрибут не указан, CORS вообще не используется. Недопустимое ключевое слово и пустая строка будут обрабатываться как анонимное значение .
постер	Указывает изображение, которое будет использоваться, пока видео недоступно (т. е. оно еще не загружено). Обычно это изображение одного из первых кадров видео. Если указано, значение должно быть допустимым URL-адресом изображения.
preload	Указывает, следует ли предварительно загружать видео, и если да, то каким образом. Этот атрибут позволяет автору дать браузеру/агенту пользователя подсказку о том, что, по мнению автора, приведет к наилучшему взаимодействию с пользователем. В некоторых случаях этот атрибут может быть проигнорирован. Например, если пользователь отключил предварительную загрузку или возникли проблемы с сетевым подключением. Возможные значения: нет метаданные авто Обратите внимание, что атрибут autoplay может переопределить атрибут preload (поскольку, если медиафайл воспроизводится, он, естественно, должен сначала буферизоваться, независимо от подсказки, заданной атрибутом preload). Несмотря на это, вы по-прежнему можете указать оба атрибута.
autoplay	Указывает, следует ли начинать воспроизведение видео, как только оно может воспроизводиться без остановки. Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое соответствует каноническому имени атрибута без учета регистра, без начального или конечного пробела (т. е. либо autoplay или autoplay="autoplay" ). Возможные значения: [Пустая строка] автовоспроизведение
медиагруппа	Для синхронизации воспроизведения видео (или элементов мультимедиа). Позволяет указать медиа-элементы для связи друг с другом. Значение представляет собой текстовую строку, например: mediagroup=movie . Видео/медиа элементы с одинаковым значением автоматически связываются пользовательским агентом/браузером. Примером использования атрибута медиагруппы является наложение дорожки сурдопереводчика из одного файла фильма поверх другого.
цикл	Указывает, следует ли продолжать повторное воспроизведение видео после его завершения. Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, которое соответствует каноническому имени атрибута без учета регистра, без начального или конечного пробела (т. е. либо цикл или цикл="цикл" ). Возможные значения: [Пустая строка] петля
без звука	Управляет состоянием аудиовыхода видео по умолчанию. При наличии этого атрибута звук при загрузке отключается (т. е. звук отсутствует). Этот атрибут переопределит предпочтения пользователей. Затем пользователь может включить звук, если он / она того пожелает. Это помогает пользователям не раздражаться громкими звуками, исходящими от видео, как только страница/видео начинает загружаться. Пользователи часто закрывают браузер, когда это происходит. Атрибут «без звука» призван решить эту проблему, заставляя видео начинаться тихо, а не громко. Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение без учета регистра для канонического имени атрибута без начального или конечного пробела (например, muted или muted="muted" ). Возможные значения: [Пустая строка] приглушенный
элементы управления	Указывает, отображать ли элементы управления видео (например, кнопку воспроизведения/паузы и т. д.). Этот атрибут является логическим атрибутом. Следовательно, само наличие этого атрибута приравнивается к истинному значению. Вы также можете указать значение, не зависящее от регистра, для канонического имени атрибута, без начального или конечного пробела (т. е. либо control , либо controls="controls" ). Возможные значения: [Пустая строка] управляет
ширина	Указывает ширину в пикселях для отображения видео. Возможные значения: [Неотрицательное целое число] (например, 300)
height	Указывает высоту в пикселях для отображения видео. Возможные значения: [Неотрицательное целое число] (например, 150)

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к диалоговому 9). 0010 элементов).

• ключ доступа
• автокапитализировать
• класс
• редактируемый контент
• данные-*
• директор
• перетаскиваемый
• скрытый
• идентификатор
• режим ввода
• это
• идентификатор товара
• элементпроп
• Артикул
• предметная область
• тип изделия
• язык
• часть
• слот
• проверка правописания
• стиль
• tabindex
• наименование
• перевод

Полное описание этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

• прерывание
• onauxclick
• размытие
• при отмене
• онканплей
• oncanplaythrough
• при смене
• по клику
• при закрытии
• в контекстном меню
• копия
• при обмене
• нарезной
• ondblclick
• ондраг
• ондрагенд
• Драгентер
• ондрагзит
• на накладке
• ондраговер
• ондрагстарт
• ондроп
• ondurationchange
• пустой
• комбинированный
• при ошибке
• онфокус
• данные формы
• на входе
• недействительный
• нажатие клавиши
• нажатие клавиши
• onkeyup
• onlanguagechange
• под нагрузкой
• загруженные данные
• загруженные метаданные
• при запуске
• по нажатию мыши
• ввод с помощью мыши
• на коврике для мыши
• onmousemove
• onmouseout
• при наведении мыши
• на мышке вверх
• паста
• при паузе
• в игре
• в игре
• в процессе
• при изменении скорости
• при сбросе
• при изменении размера
• при прокрутке
• нарушение политики безопасности
• поиск
• поиск
• по выбору
• при смене слота
• установлен
• при отправке
• приостановить
• своевременное обновление
• нагрудник
• при изменении объема
• в ожидании
• на колесе

Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5.

Поддержка веб-сервера для типа MIME

Вы должны убедиться, что ваш веб-сервер поддерживает формат видео, который вы используете. Если вы обнаружите, что ваше видео нормально воспроизводится на вашем локальном компьютере, но не воспроизводится на вашем веб-сервере в реальном времени, возможно, это связано с тем, что веб-сервер в реальном времени не настроен должным образом для вашего видеоформата. Вам необходимо убедиться, что ваш веб-сервер поддерживает MIME тип вашего видео.

Если вы используете веб-сервер Apache, вы можете добавить следующий код в файл httpd.conf или в файл .htaccess в каталоге, где находится ваш видеофайл:

AddType видео/ogg .ogv Видео AddType/mp4 .mp4 Видео AddType/webm .webm

Если вы используете Plesk:

1. Выберите веб-сайт, который вы хотите настроить (если у вас несколько веб-сайтов)
2. Перейти к веб-каталогам
3. Перейдите на вкладку Типы MIME
4. Щелкните Добавить новый тип MIME
5. Введите расширение файла в поле Extension (например, . ogg )
6. Введите содержимое в поле Content (например, video/ogg ). Кроме того, вы можете выбрать значение из раскрывающегося меню (если оно доступно).
7. Нажмите ОК

HTML5 Video

Зачем нужен тег Video?

Раньше видео можно было воспроизводить на веб-страницах только с помощью веб-плагинов, таких как Flash player и т. д. После выпуска HTML5 элемент видео можно использовать для добавления видеоконтента на веб-страницу.

Что такое тег видео?

HTML5 запустил элемент видео цели воспроизведения видео, частично изменив элемент объекта. Создатели планировали, что видео HTML5 станет новым стандартным способом отображения видео в Интернете, вместо предыдущего стандарта использования плагина Adobe Flash тег

Видео HTML5 в настоящее время широко используется в основных браузерах и поддерживается основными веб-сайтами, такими как YouTube. Элементы видео и аудио следуют одному и тому же основному синтаксису. В самой стандартной форме все, что мы хотим сделать, это использовать элемент src , чтобы добавить атрибут управления и распознать URL-адрес видео. Чтобы посетители нашего сайта могли управлять воспроизведением видео. Мы можем использовать атрибуты высоты и ширины, чтобы зафиксировать размер видеоплеера, но это не обязательно.

Преимущества -

Использование тега видео имеет два огромных преимущества -

• Аппаратное ускорение - При воспроизведении видео в браузере с аппаратным ускорением потребляется значительно меньше ресурсов ЦП по сравнению с использованием в новом браузере.
• Плагин бесплатный - Нам не нужно беспокоиться о загрузке правильного плагина или проблемах с воспроизведением, поскольку звук не требует плагинов.

Воспроизведение видео на веб-странице

Раньше HTML5, видео проигрывалось только в браузере с флеш-плеером (например, с плагином). Элемент HTML5

Элемент