Html video тег – Как сделать собственный видео-плеер на HTML5 Video / Microsoft corporate blog / Habr

Содержание

Тег | 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>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):

Формат MIME-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/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>

Тег 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
metadata
none

Определяет особенности загрузки видео элемента.
auto - загружать видео полностью при загрузке страницы.
metadata - при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность видео).
none - не загружать видео при загрузке страницы.

Если указан атрибут 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

БраузерMP3WavOgg
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.

БраузерMP4WebMOgg
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?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *