Тег | HTML справочник
HTML тегиЗначение и применение
Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML 5 были введены новые элементы <video> и <audio>. Тег <video> добавляет видео контент на страницу. Элементы поддерживаются во всех современных браузерах.
Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения. В настоящее время существует 3 поддерживаемых формата видео для элемента <video>:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Opera | ДА | ДА | ДА |
| Safari | ДА | НЕТ | НЕТ |
| IE | ДА | НЕТ | НЕТ |
| Edge | ДА | НЕТ | НЕТ |
- Контейнер MPEG-4 + видео кодек Н.264 + аудио кодек ААС. Это сочетание обычно называют «MPEG-4». Н.264 — высококачественный и гибкий видео кодек, но он запатентован и на его использование необходимо получить платную лицензию. Лицензионные требования стали основной причиной, почему браузеры отказываются его поддерживать.
- Контейнер Ogg + видео кодек Theora + аудио кодек Vorbis. Как правило, формат называется «Ogg Theora». Все кодеки и контейнер в этом варианте с открытым исходным кодом и без патентных или лицензионных ограничений.
- Контейнер WebM + видео кодек VP8 + аудио кодек Vorbis. «WebM» открытый формат мультимедиа, представленный компанией на конференции Google I/O 19 мая 2010 года. Формат не требует лицензионных отчислений, основан на открытых видео кодеках VP8 и VP9, аудио кодеке Vorbis и подмножестве медиа контейнера Matroska. Новый формат вместе с VP8 призван заменить проприетарный стандарт H.264/MPEG-4.
Поддержка браузерами
Атрибуты
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <video></title> </head> <body> <h2>Видео в HTML5</h2> <video width = "320" height = "240" poster = "10.jpg" controls> <source src = "123.mp4" type = "video/mp4"> <source src = "123.ogg" type = "video/ogg"> <track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English"> <track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default> Ваш браузер не поддерживает видео тег. </video> </body> </html>
В этом примере мы:
Добавили на страницу видео (тег <video>) шириной
Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):
| Формат | MIME-типы |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/webm |
Благодаря тегу <track> добавили субтитры к видео:
- Добавили путь к файлу атрибутом src.
- Установили тип дорожки — субтитры kind = «subtitles» (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
- Установили язык дорожки srclang = «ru».
- Отобразили названия двух дорожек label = «English», label = «Russian».
- Выбрали дорожку по умолчанию атрибутом default.
Результат нашего примера:
Ваш браузер не поддерживает видео тег. Добавление видео с субтитрами на страницу (HTML тег <video>).Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:
<video src = "123.mp4" width = "320" height = "240" poster = "10.jpg" controls> Ваш браузер не поддерживает этот видео формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот видео формат--> Вы можете скачать этот файл по ссылке. </video>
Значение CSS по умолчанию
Нет.Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиТег | HTML справочник
Поддержка браузерами
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 10.5+ | 4.0+ |
Описание
HTML тег <video> позволяет добавить на страницу видеофайл. Некоторые браузеры не поддерживают видеофайлы некоторых форматов, поэтому необходимо предоставить видеофайл в нескольких форматах одновременно, для этого используются теги <source>, которые должны располагаться внутри элемента <video>.
Любой текст внутри элемента <video> будет отображен браузером в том случае, когда сам элемент или формат используемого видеофайла не поддерживается браузером.
Примечание: атрибутам controls, autoplay и loop при использовании не обязательно должны быть присвоены значения, эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан — выключенной.
Атрибуты
- autoplay:
- Указывает, что воспроизведение видеофайла должно начинаться автоматически, как только файл будет полностью загружен. Значения для логического атрибута autoplay можно задавать следующими способами:
<video autoplay> <video autoplay="autoplay"> <video autoplay="">
- controls:
- Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии). Значения для логического атрибута controls можно задавать следующими способами:
<video controls> <video controls="controls"> <video controls="">
Пример » - height:
- Устанавливает высоту видеоплеера в пикселях (пример:). Пример »
- loop:
- Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Значения для логического атрибута loop можно задавать следующими способами:
<video loop> <video loop="loop"> <video loop="">
Пример » - muted:
- Позволяет отключить звук, чтобы по умолчанию видео воспроизводилось беззвучно, при желании пользователь сможет включить звук самостоятельно. Возможные значения логического атрибута muted:
<video muted> <video muted="muted"> <video muted="">
Пример »Примечание: атрибут muted не поддерживается в IE9 и более ранних версиях.
- poster:
- Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика. Пример »
- preload:
- Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
- auto — загрузка видеофайла начнется после загрузки страницы
- metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
- none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение
Примечание: атрибут preload не поддерживается браузером Internet Explorer.
- src:
- Определяет путь к нужному видеофайлу (путь может быть либо абсолютным либо относительным). Пример »
- width:
- Устанавливает ширину видеоплеера в пикселях (пример:). Пример »
Тег <video> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<video controls="controls" poster="video/duel.jpg"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает тег video. </video>
Результат данного примера в окне браузера:
Тег video HTML5 » Энциклопедия HTML5
Элемент <video> </video>
В HTML5 добавили новый тег video, он отвечает за воспроизведение видеофайлов на веб-странице, причем для воспроизведения видеофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка видеофайлов уже включена в спецификацию HTML5.
Пример кода тега <video>
Пример добавления видеофайла при помощи тега <video>:
<video controls="controls" poster="teg-video.jpg">
<source src="norwegian-army-harlem-shake.ogv" />
<source src="norwegian-army-harlem-shake.mp4" />
</video>Результат:
Странно, Safari почему то не видит тега видео.
Автор ролика: Норвежская армия,
Название: Garlem Shake.
Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb
Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.
В нашем примере, тег <source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv, то он будет проигрывать файлы с расширением .mp4
Таблица поддержки браузерами видео кодеков и форматов
Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4, а другой с расширенеим .ogv
| БРАУЗЕР/КОДЕК | h.264 | ogg/vorbis | webm |
|---|---|---|---|
| Chrome 6+ | да | да | да |
| FireFox 3.6+ | нет | да | да |
| IE 9+ | да | нет | нет |
| Opera 10.60+ | нет | да | да |
| Safari 4+ | да | нет | нет |
У видео формата OGG/VORBIS, расширение файлов будет .ogv
У видео формата h.264, расширение файлов будет .mp4
DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.
Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…
Атрибуты тега <video>
autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)).
controls="controls" — создает панель управления видеофайлом, по умолчанию атрибут отключён.
height=" " — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=» «.
width=" " — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=» «.
loop="loop" — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.
poster="адрес" — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.
preload="auto/metadata/ — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none"none
Определения значений:auto — загружает видеофайл,metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,none — не загружает видеофайл.
Атрибут preload=» » не работает, если включен атрибут autoplay=» «
src="адрес" — указывает путь к видеофайлу.
В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.
Тегом video можно управлять через CSS.
Читать далее: тег source
| Справочник HTML
Элемент <video> (от англ. «video» ‒ «видео») вставляет видео файл в HTML-документ. С его помощью можно воспроизводить видео файлы, а так же устанавливать различные настройки воспроизведения этих файлов (повтор, автовоспроизведение, картинка по умолчанию).
Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Элемент <video> может содержать в себе сразу несколько элементов в каждом из которых (при помощи атрибута src) указывается вариация одного и того же видео с различными версиями кодеков.Внутри контейнера <video> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Видео кодеки
Видеокодек — это программа/алгоритм сжатия (т.е. уменьшения размера) видеоданных (видеофайла, видеопотока) и восстановления сжатых данных. Кодек — это файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, воспроизвести видео.
В настоящее время поддерживается три видео формата — MP4, WEBM, OGG:
MP4/MPEG-4 — самый популярный видео формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Расширение файла MP4 используется в основном для мультимедийного формата файла MPEG-4. Формат MPEG-4 – это стандарт, разработанный группой экспертов Moving Picture Experts Group (MPEG), как определено в MPEG-4, содержит MPEG-4 закодированный видео и аудио контент в кодировке Advanced Audio Coding (AAC). Обычно используется расширение файла MP4.
WebM — открытый формат мультимедиа, представленный компанией Google. Хранит видео, сжатое при помощи технологии VP8 и аудио, сжатое с помощью компрессии Ogg Vorbis. Часто всего применяется для онлайн-отправки видео с помощью HTML5.
OGG — открытый стандарт формата мультимедиаконтейнера, являющийся основным файловым и потоковым форматом для мультимедиакодеков фонда Xiph.Org, а также название проекта, занимающегося разработкой этого формата и кодеков для него. Как и все технологии, разрабатываемые под эгидой Xiph.Org, формат Ogg является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.
Поддержка браузерами форматов аудио
| Формат | ||||||
| MP4 | Да | Да | Да | Да | Да | Да |
| WebM | Да | Да | Да | Да | ||
| Ogg | Да | Да | Да | Да |
MIME-типы для видео форматов
| Формат | MIME-тип |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Синтаксис
<video src="URL">...</video>
<video>
<source src="URL">
</video>Закрывающий тег
Обязателен.
Атрибуты
- autoplayHTML5
- Указывает, что воспроизведение видеофайла должно начинаться автоматически, как только файл будет полностью загружен.
- controlsHTML5
- Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии).
- heightHTML5
- Задаёт высоту области для воспроизведения видеоролика.
- loopHTML5
- Повторяет воспроизведение видео с начала после его завершения.
- posterHTML5
- Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.
- preloadHTML5
- Указывает, какие действия должен выполнять браузер, если для видеоплеера не указан атрибут autoplay. При совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован. Он может принимать одно из следующих трех значений:
auto — загрузка видеофайла начнется после загрузки страницы
metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение - srcHTML5
- Указывает URL адрес видео файла.
- widthHTML5
- Задаёт ширину области для воспроизведения видеоролика.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Нет.
Различия между HTML 4.01 и HTML5
Элемент <video> является новым в HTML5.
Пример использования:
Пример HTML:
Попробуй сам<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает элемент video.
</video>
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <video> | 9+ | 4+ | 11.5+ | Да | 4+ | 3.5+ |
| Элемент | ||||
| <video> | 2.1+ | 3.5+ | 12+ | 3.2+ |
Тег HTML видео на сайт
Тег <video> HTML используется для вставки на сайт воспроизводимого видео. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника видео-файла.
Для указания субтитров, глав и другой текстовой информации используется тег <track>.
Этот тег был введен в HTML5.
Синтаксис
<video>вложенные теги / альтернативный текст</video>Альтернативный текст. Вы можете указать внутри тега <video> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.
Примеры использования <video> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Вставка видео на сайт</title>
</head>
<body>
<video autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером
</video>
</body>
</html>Поддержка браузерами
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| autoplay | не указывается / autoplay |
Если указан, видео будет воспроизведено, как только будет загружено. |
| controls | не указывается / controls |
Если указан, будут выведены кнопки управления плеером (play, pause и т.д.). |
| height | число |
Устанавливает высоту видео. |
| loop | не указывается / loop |
Если указан, видео будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала). |
| muted | не указывается / muted |
Если указан, видео будет воспроизведено без звука. |
| poster | URL |
Адрес картинки — превью. Превью выводится на месте видеоплеера пока воспроизведение видео не началось. |
| preload |
auto |
Определяет особенности загрузки видео элемента. Если указан атрибут autoplay, атрибут preload будет проигнорирован. |
| src | URL |
Адрес видео-файла. |
| width | число |
Устанавливает ширину видео. |
HTML: Теги video и audio
Хотя веб-браузеры имеют встроенную поддержку изображений с самых первых дней, встраивание аудио или видео на веб-страницу всегда требовало дополнительных подключаемых модулей (отдельных программных компонентов), которые добавляют больше возможностей браузеру, но не являются его частью (например Flash, QuickTime, RealPlayer и другие).
Плагин также означает, что приложение, которое воспроизводит аудио и видео содержимое, не является частью браузера. Подключаемый модуль заблокирован в виртуальной среде со своей программой, изолированной от браузера и от другого содержимого страницы. Кроме того, подключаемые модули являются необязательными, так что нельзя быть уверенным, что посетители сайта имеют нужное программное обеспечение для просмотра содержимого.
Стандарт HTML5 вводит новые элементы <audio> и <video>, которые позволяют веб-разработчикам встраивать звук и видео на веб-страницу, не требуя собственных плагинов. Конечно из этого следует, что сам браузер должен иметь возможность воспроизведения таких файлов, на данный момент только последние версии браузеров поддерживают эти элементы.
Медиа кодеки и форматы
Цифровые аудио и видео данные обрабатываются через кодек, формулу, которая преобразует и сжимает звук или видео в поток битов для передачи через Интернет (термин «кодек» представляет сокращенное сочетание двух слов «код» и «декодирование»). Когда данные доходят до конечного пользователя, то он должен иметь тот же кодек для декодирования закодированного сигнала и преобразования его обратно в звук или видео.
Некоторые медиа кодеки запатентованы, то есть они принадлежат только одной компании и не относятся к открытым стандартам, и, как правило, владельцы патентов обычно взимают лицензионные сборы за использование их алгоритмов. Разработчики браузеров, такие как Apple, Google и Microsoft, имеют большой капитал и готовы лицензировать запатентованные кодеки для своих браузеров. Другие производители браузеров, такие как Mozilla и Opera вместо этого выбирают открытые стандарты кодеков и не используют запатентованные их виды. Даже не смотря на то, что последние версии всех браузеров поддерживают встроенные медиа-файлы HTML5, они еще не пришли к соглашению какие кодеки лучше использовать.
После того как медиа данные закодированы, они должны быть инкапсулированы и упакованы для доставки в одном из нескольких форматов. Эти форматы являются контейнерами для медиа-файлов, которые передаются между сервером и клиентом. Для проигрывания встроенных медиа-файлов браузер должен сначала прочитать формат контейнера, а затем расшифровать закодированные данные внутри него. Так же, как браузеры поддерживают разные кодеки, они также поддерживают различные форматы контейнеров для встроенных медиа-файлов.
Встроенные медиа-файлы должны быть переданы с надлежащим типом контента для каждого формата, так и клиент, и сервер смогут распознать, как обрабатывать эти файлы. Веб-сервер обрабатывает медиа типы автоматически, по крайней мере, для наиболее распространенных форматов. Для некоторых новых форматов может понадобиться дополнительная настройка сервера, обычно это заключается в добавлении нового типа контента в файл конфигурации.
Тег <audio>
Элемент <audio> внедряет звуковой файл на веб-страницу. Это заменяемый элемент, но он не относится к пустым элементам, поэтому он может содержать и собственный контент и другие элементы. В своей простейшей форме элемент <audio> должен иметь только атрибут src, указывающий путь к звуковому файлу:
<audio src="audio/file.mp3"></audio>
Однако он редко используется в такой простой форме. По умолчанию элемент <audio> не имеет элементов управления и поэтому полностью невидимый. Он будет располагаться в HTML-документе и может быть доступен в браузере или JavaScript, но простое внедрение аудио файла не принесет особой пользы. С помощью логического атрибута controls можно добавить к аудио-файлу его собственные элементы управления, которые будут отображаться на веб-странице в месте расположения элемента <audio>:
<audio src="audio/file.mp3" controls></audio>
Эти элементы управления предоставляются браузером и могут визуально отличаться в зависимости от браузера, но предоставляемые функции остаются неизменными:
- кнопка play/pause
- полоса прокрутки
- отображение времени
- громкость
Элемент <audio> может содержать один или несколько элементов <source>, каждый из которых будет ссылаться на свой аудио-файл, что будет полезно из-за отсутствия единого формата, поддерживаемого всеми браузерами. В этом случае браузер будет проигрывать первый медиа-файл, который он поддерживает, игнорируя все остальные:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
</head>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Попробовать »Аудио форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых аудио формата для элемента <audio>: MP3, Wav, Ogg
| Браузер | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9 или выше | да | нет | нет |
| Firefox 4.0 или выше | нет | нет | да |
| Google Chrome 6 или выше | да | да | да |
| Apple Safari 5 или выше | да | да | нет |
| Opera 10.6 или выше | нет | да | да |
Тег <video>
Элемент <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла:
<video src="video/file.mp4" controls></video>
Атрибут controls добавляет элементы управления, с помощью которых пользователь сможет взаимодействовать с плеером. Атрибут autoplay указывает браузеру, что видео должно начать воспроизведение сразу, как только страница будет загружена, если он не указан, то в плеере будет отображен первый кадр исходного видео. Но чаще всего он не несет никакой полезной информации о том, что будет представлено с помощью видео-контента. Вместо этого можно предоставить любое изображение, указав к нему путь в атрибуте poster:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
</head>
<body>
<video controls="controls" poster="logo.png">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>
</body>
</html>
Попробовать »Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
</head>
<body>
<video controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
Попробовать »Видео форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer 9 или выше | да | нет | нет |
| Firefox 4.0 или выше | нет | да | да |
| Google Chrome 6 или выше | да | да | да |
| Apple Safari 5 или выше | да | нет | нет |
| Opera 10.6 или выше | нет | да | да |
Flash и HTML5-тег «video» — позиция YouTube / Habr
Пару дней назад YouTube разместил в своем блоге интересный пост.Сразу скажу от себя, что в последнее время я с интересом наблюдаю за всем этим искусственно раздуваемым «противостоянием» Flash-платформы и HTML5, но уверен, что тема интересует не только меня.
Интересно, что многие бросаются в бой с головой с аргументами вроде «мы хотим открытые стандарты, мы не хотим этот ужасный, отвратительный и жутко проприетарный Flash, который к тому же еще и всего-лишь навсего плагин!». Вот именно внимание таких людей я и хочу обратить на то, что «HTML5» (в частности тег <video>) — это не серебряная пуля, и я сторонник точки зрения, что Великое Пришествие HTML5 не решит разом всех проблем.
Рано или поздно кто-то должен был обозначить (более-менее) объективную позицию по этой теме и вот это сделали YouTube, а они, будем надеяться, хоть что-то да смыслят в таких вещах как «видео» и «флэш».
Итак, собственно, перевод. Поехали.
В последнее время было множество дискуссий и споров о том, станет ли в конце концов вожделенный тег HTML5 <video> заменой Flash Player’у для проигрывания видео онлайн. Нас самих уже долгое время интересуют подвижки, связанные с HTML И тегом <video>, и большую часть видео на YouTube уже можно просматривать с помощью нашего HTML5-плеера. Его работа показала нам, что хотя тег <video> — это большой шаг в сторону открытых стандартов, платформа Adobe Flash продолжит играть критическую роль в доставке видео в интернете.
Важно понимать, чего же именно такому сайту, как YouTube, нужно от браузера для того, чтобы сервис устраивал и зрителей, и создателей самого видео-контента. Здесь необходимо чуть больше усилий, чем просто указать браузеру на видео-файл, как это делает тег <img> с картинками — на практике все оказывается сложнее, чем просто достать и показать видео. Разумеется, тег <video> реализует самые необходимые базовые требования и кипит работа над выполнением остальных, но в текущем состоянии <video>-тег не в состоянии учесть все требования YouTube:
Стандартный формат видео
Первое и основное — нам нужно, чтобы все браузеры поддерживали стандартный формат видео. Пользователи загружают на YouTube по 24 часа видео каждую минуту, так что важно минимизировать количество поддерживаемых форматов. Особенно, если иметь в виду, что для каждого видео-формата можно сделать еще и несколько размеров (360p, 480p, 720p, 1080p). Мы тут кодируем видео для YouTube кодеком H.264 с самого 2007-го года, и используем этот кодек как для Flash Player’а, так и для мобильников iPhone и Android-фонов. Это позволяет нам легко запустить HTML5-видео в браузерах, которые поддерживают H.264, например, в Chrome и Safari.
Беспокойство о патентах и лицензиях привели к тому, что некоторые браузеры не поддерживают H.264, а это, в свою очередь, привело к тому, что в спецификации HTML5 нет требования о поддержке стандартного формата видео. Мы считаем, что вебу нужна альтернатива в виде открытого формата. Такого, который не только будет разрешать нюансы лицензирования, но также будет учитывать специфичные особенности видео в вебе. В этом плане, мы заинтересованы в успехе нового проекта WebM. Например, Google, в качестве вклада в общее доброе дело, открывает исходники VP8 и делится ими с WebM. Google, Mozilla и Opera поддерживают WebM и мы уже начинаем работать над тем, чтобы видео было доступно в этом формате. Adobe также пообещал поддержку VP8, видео-кодека для WebM, в будущих релизах Flash Player’а.
Полноценное потоковое видео
Вместе с необходимостью стандартного видео-формата, также нужны эффективные и надежные средства для собственно доставки видео в браузер. Простое указание браузеру нужного URL недостаточно — это не дает пользователю возможности указать напрямую на кусок видео, который его интересует. В то время как мы двигаемся к размещению полнометражных фильмов и освещению событий в прямом эфире, становится очень важно иметь достаточный контроль над «буфером» и качеством (причем, «на лету»).
Flash Player позволяет решить подобные вопросы, позволяя приложениям самим управлять скачиванием и проигрыванием видео с помощью Actionscript, одновременно используя либо HTTP, либо RTMP-протокол для потокового видео. HTML5-стандарт сам по себе не рассматривает никаких проблем, связанных с протоколами потокового видео, но многие независимые организации работают над улучшением передачи видео через HTTP. Мы тоже начинаем прикладывать к этому усилия и надеемся увидеть единый стандарт в будущем.
Защита контента
YouTube — не владелец тех видео, которые вы смотрите — ими владеют их создатели, авторы, которые и контролируют как именно видео распространяются через YouTube. Для YouTube Rentals, например, владельцы видео требуют от нас технологий для защиты потока, такого как RTMPE-протокол во Flash, чтобы предотвратить дальнейшее (нелегальное) распространение. Без подобных технологий защиты, мы не смогли бы предлагать вот этого видео.
Инкапсуляция и внедрение
Возможность Flash Player’а соединять код приложения и ресурсы в эдакий защищенный и эффективный контейнер — одна из ключевых в возможности встраивать видео с YouTube в другие веб-сайты. Владельцы сайтов должны быть уверены, что внедренный в страницу контент не сможет получить конфиденциальную информацию пользователя, а мы должны быть уверены, что вся логика нашего плеера (для таких фич, как «надписи», «аннотации», «реклама») будет отправлена вместе с видео. В то время как HTML5 добавляет функциональность по изоляции (sandboxing) и передаче сообщений, Flash — единственный механизм, который большинство сайтов готовы использовать для внедрения контента с других сайтов.
Полноэкранное видео
HD-видео так и просится быть показанным во весь экран, но это исторически не было возможно с помощью чистого HTML. Хотя в большинстве браузеров есть полноэкранный режим, они не позволяют активизировать его с помощью JavaScript, также как не позволяют развернуть на весь экран определенную часть страницы (например, видео-плеером). Flash Player в этом плане предоставляет полноценное и безопасное решение для проигрывания полноэкранного видео с поддержкой аппаратного ускорения. Хотя WebKit недавно совершил пару шагов в поддержке полноэкранного режима, этого недостаточно для проигрывания видео (если точнее — возможности показывать дополнительный контент поверх видео).
Доступ к камере и микрофону
Видео движется не только в одну сторону. Каждый день, тысячи пользователей записывают видео напрямую на YouTube из своих браузеров, используя веб-камеры, что было бы невозможно без Flash-технологии. Доступ к камере также нужен для таких штучек, как видео-чат и вещание в режиме «онлайн» — особенно важно для мобильных телефонов, ведь практическив любом из них есть встроенная камера. Flash Player предлагает богатые возможности по доступу к камере и микрофону уже несколько лет, в то время как у HTML5 еще все только начинается.
Мы рады видеть такие активные и полные энтузиазма дискуссии по поводу развития веб-стандартов — ведь YouTube зависит от улучшений в браузерах, чтобы в свою очередь развивать средства просмотра видео для пользователей. В то время как поддержка видео в HTML5 позволит нам показывать наши видео-ролики на компьютерах и устройствах, которые не поддерживают Flash Player, она пока не соответствует всем нашим требованиям. На сегодняшний же день, Adobe Flash является лучшей платформой, подходящей под наши требования, и именно поэтому наш основной видео-плеер сделан именно на Flash.
John Harding, Software Engineer
Как видите, стандарт — это стандарт, но он может не учитывать многие вещи, потому как практика зачастую выходит за рамки стандартов, что происходит и с HTML5. Так что нужно рассматривать проблему чуть менее поверхностно, и даже с точки зрения простого проигрывания видео, просто взять и выбросить Flash как он есть (как этого хочет Apple) — так просто не удастся.
P.S. И нет, я не фанат Flash-технологии самой по себе, а просто считаю, что это обычный инструмент, решающий определенные задачи. Включая проигрывание видео.
Что обо всем этом думают Хабра-people?