video - местами работаем, местами нет...

[Makha]

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

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

В частности, это содержание не предназначено для решения проблемы доступности. Чтобы сделать видео доступным для слепых, глухих и людей с другими физическими или когнитивными расстройствами, авторы должны предоставить альтернативные потоки средств массовой информации и / или вставлять доступность средств (например, заголовок или дорожек субтитров, аудиодорожек описание, или вход Язык накладками) в медиа потоки.

src , preload , autoplay , mediagroup , loop , muted и controls атрибуты, общие для всех медиа-элементов.

poster атрибут дает адрес файла изображения, который может показать агент пользователя, в то время как никакие видеоданные не доступны. Атрибут, если есть должен содержать допустимый непустой URL, потенциально окруженный пробелами.

<sсriрt>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.';);
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.';);
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';);
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.';);
       break;
     default:
       alert('An unknown error occurred.';);
       break;
   }
 }
</sсriрt>
<p><videо src="tgif.vid" autoplay controls onerror="failed(event)"></videо></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

Поддержка < video > все еще развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде.

Существует много форматов контейнеров видео, вот некоторые самые популярные.

MPEG-4, обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov). Трейлеры к фильмам на сайте Apple по-прежнему используют старый контейнер, но фильмы в iTunes поставляются в формате контейнера MPEG-4.

Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер MPEG-4.

Ogg, обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободный от каких-либо патентов. Браузеры Firefox 3.5, Chrome 4 и Opera 10.5 имеют встроенную поддержку без специальных плагинов — контейнера Ogg, Ogg-видео (называемое «Theora») и Ogg-аудио (называемое «Vorbis»). Ogg поддерживается всеми основными дистрибутивами Linux, также можно использовать его на Mac и Windows установив соответственно компоненты QuickTime или фильтры DirectShow. Плеер VLC превосходно проигрывает Ogg-файлы на любой платформе.

WebM это новый формат контейнера, технически похожий на другой формат называемый Matroska. WebM был анонсирован в мае 2010 года и предназначен для использования исключительно с видеокодеком VP8 и аудиокодеком Vorbis. Встроенная поддержка без специальных плагинов имеется в браузерах Chromuim, Google Chrome, Mozilla Firefox и Opera. Компания Adobe объявила, что будущая версия Flash также будет поддерживать WebM-видео.

Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретен Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.

Нет единой комбинации контейнеров и кодеков, которая работает во всех HTML5-браузерах. И эта ситуация вряд ли изменится в ближайшем будущем.

Чтобы ваше видео можно было смотреть на всех устройствах и платформах, придется кодировать видео несколько раз.

Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.
1 Сделать одну версию с помощью WebM (VP8 + Vorbis).
2 Сделать еще одну версию, которая использует видео в базовом H.264 и аудио AAC с профилем «низкая сложность» в контейнере MP4.
3 Сделать еще одну версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg.
4 В одном элементе поставить ссылку на все три видеофайла и предусмотреть откат к плееру на Flash.

Кросбраузерный пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Видео</title>
 </head>
 <body>
  <videо id="movie" width="400" height="320" preload controls>
   <source src="video/snowman.mp4" />
   <source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"' />
   <object id="flowplayer" type="application/x-shockwave-flash" 
      width="400" height="320">
    <param name="movie" value="video/flowplayer-3.2.5.swf" /> 
    <param name="flashvars" value='config={"clip":"video/snowman.mp4"}' />
    <p>Загрузить видео в <a href="video/snowman.mp4">MP4</a>, 
         <a href="video/snowman.ogv">OGG</a> или 
         <a href="video/snowman.webm">WebM</a></p>
   </object>
  </videо>
  <sсriрt>
   var v = document.getElementById("movie");
   v.onclick = function() {
    if (v.paused) {
     v.play();
    } else {
     v.pause();
    }
   };
  </sсriрt>
 </body>
</html>

См. комментарии для более полной информации

Comments

[Makha]

Вот пример видео, которое начинает загрузку (но не воспроизведение), как только загрузится страница.

<videо src="pr6.webm" width="320" height="240" preload></videо>

А вот пример видео, которое не будет загружаться при загрузке страницы.

<videо src="pr6.webm" width="320" height="240" preload="none"></videо>

Атрибут autoplay делает именно то, как и звучит: говорит браузеру, что вы хотели бы начать загрузку видеофайла при загрузке страницы, и желаете воспроизвести видео автоматически при возможности.

<videо src="pr6.webm" width="320" height="240" autoplay></videо>

А вот скрипт Greasemonkey, который можно установить в вашей локальной копии Firefox для предотвращения автоматического воспроизведения HTML5-видео. Он использует DOM-атрибут autoplay определенный в HTML5 и эквивалентный атрибуту autoplay в коде HTML.

var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
var elmVideo = arVideos[i];
elmVideo.autoplay = false;
}

Но подождите секунду... Если вы следовали этой главе, то у вас есть не один видеофайл, а три. Один это OGV-файл, второй MP4- файл, третий WebM-файл. HTML5 обеспечивает способ сделать ссылки на все три файла с помощью элемента . Каждый элемент может содержать более одного тега . Ваш браузер пройдется по списку источников видео по порядку и выберет первым то, что он в состоянии воспроизвести.

Возникает другой вопрос: как браузер узнает, какое видео он сможет воспроизвести? Ну, в худшем случае он загружает каждое видео и пытается его сыграть, однако это большая трата пропускной способности. Вы сэкономите много трафика, если сообщите браузеру информацию о каждом видео. Это можно сделать атрибутом type тега .

<videо width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</videо>

Элемент < video> определяет ширину и высоту видео, но не ссылку на видеофайл. Внутри < video> три элемента < source>. Каждый элемент < source> ссылается на отдельный видеофайл (с атрибутом src), а также дает информацию о видеоформате (в атрибуте type).

[Makha]

Тип атрибута выглядит сложным, адски сложным. Это комбинация из трех блоков информации: формат файла, видеокодек и аудиокодек. Давайте начнем с самого последнего. Для видеофайла .ogv формат контейнера это Ogg, представленный здесь как video/ogg, строго говоря, это MIME-тип для видеофайлов Ogg. Видеокодек Theora и аудиокодек Vorbis. Это достаточно просто, кроме формата значение атрибута, он немного странный. Само значение должно быть заключено в кавычки, поэтому вы должны использовать различные виды кавычек, чтобы окружить значение целиком.

<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>

С WebM почти так же, но с другим MIME-типом (video/webm вместо video/ogg) и другим видеокодеком (vp8 вместо theora) написанным в параметре codecs.

<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>

Видео H.264 является более сложным. Помните, я говорил, что видео H.264 и аудио AAC может быть в разных «профилях»? Мы кодируем H.264 с помощью «базового» профиля и AAC с профилем «низкая сложность» и все это внутри контейнера MPEG-4. Вся информация, включенная в атрибут type.

<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

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

На момент написания (20 мая 2010 года), iPad содержит ошибку, из-за которой он не замечает ничего, кроме первого источника видео в списке. К сожалению, это означает, что вы должны указать ваш MP4-файл первым, а затем остальные видеоформаты. Эх.

Вы уже видели его как часть значения атрибута type у тега . Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.

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

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.

Для суровых подробностей по настройке веб-сервера, я обращаю ваше внимание на эту прекрасную статью в Mozilla Developer Center: Configuring servers for Ogg media. Советы в этой статье также относятся к видео MP4 и WebM.

[Makha]

Но HTML5 хорошо продуман, чтобы обойти проблему IE, поэтому вы можете вложить элемент < object> внутрь < video>. Браузеры, которые не поддерживают HTML5-видео, будут игнорировать элемент и просто отображать вложенный < object> который ссылается на плагин Flash и показывает кино через FlowPlayer. Браузеры, поддерживающие HTML5-видео, обнаружат источник видео, который они могут воспроизвести и проигнорируют вложенный элемент < object>...

[Makha]

Проблемы с iPhone и iPad

iOS это операционная система Apple для iPhone, iPod Touche и iPad. iOS 3.2 имеет ряд проблем с HTML5-видео.

1 iOS не распознает видео, если вставлен атрибут poster. Этот атрибут тега позволяет отображать произвольное изображение при загрузке видео или пока пользователь нажимает на кнопку «играть». Эта ошибка исправлена в iOS 4.0, но пройдет какое-то время пока пользователи обновятся.
2 Если у вас несколько элементов , iOS признает лишь первый в списке. Устройства с iOS поддерживают только H.264 + AAC + MP4, это фактически означает, что вы всегда должны указывать MP4-файл в первую очередь. Эта ошибка также исправлена в iOS 4.0.

Проблемы с устройствами на базе Android

Android это операционная система Google для разных телефонов и карманных устройств. Android (до версии 2.2 включительно, последняя версия на момент написания) имеет ряд проблем с HTML5-видео.

1 Атрибут type тега порядочно «смущает» Android. Единственный способ заставить его признать источник видео это по иронии судьбы вообще опустить атрибут type и убедиться, что имя вашего видеофайла H.264 + AAC + MP4 заканчивается расширением .mp4. Это, кажется, не влияет на способность любого другого браузера определять поддержку видео; при отсутствии атрибута type другие браузеры смотрят на расширение файла. Вы еще можете включить атрибут type для других источников видео, так как H.264 является единственным форматом видео, который поддерживается устройствами Android на данный момент.
2 Атрибут controls не поддерживается, и Android не будет отображать любые элементы управления для видео. Вам будет нужно обеспечить собственные элементы управления пользовательского интерфейса. Как минимум, вы должны сделать скрипт, который начинает проигрывать видео, когда пользователь на него нажимает.