Возможности видео

Видеотег самая популярная функция HTML5 поэтому развивается очень быстро. Браузеры с поддержкой HTML5 предоставляют пользователям дополнительные возможности управления видео онлайн. В этой статье перечислены возможности видеотега в сочетании с функциями JavaScript, CSS и с другими тегами HTML.

Оглавление:
  1. Новое в видео HTML5
  2. Видео онлайн и CSS3
  3. Добавить разделы видео
  4. Добавить подпись и субтитры
  5. Добавить афишу к видеофайлу
  6. Сделать фон видео прозрачным
  7. Управлять видео с клавиатуры
  8. Видео HTML5 и canvas
  9. Видео HTML5 и SVG
  10. Запуск воспроизведения и остановка
  11. Видео для фона сайта
  12. Воспроизведение и пауза видео при переключении закладок в браузере
  13. Микроразметка видеоролика
  14. Оптимизировать видео для поисковых систем
  15. Заключение

Новое в видео HTML5

Видеотег постоянно развивается, сначала он поддерживался только обозревателем Safari. Браузеры Firefox, Chrome и Opera в качестве общего видеоформата используют кодек WebM. Теперь видео HTML5 поддерживает даже IE9 если в системе установлен кодек WebM. Браузер Safari 5 не поддерживает формат WebM.

Для максимальной совместимости видеоформатов HTML5 в браузере рекомендуется использовать следующею комбинацию:

<video controls>
    <source src="mp4/files.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="webm/files.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Для iPad и IE10+ требуется добавлять видеоформат .mp4, для остальных браузеров WebM. Конвертировать видео в веб-форматы можно с помощью программы Miro Converter, конвертер как для Windows, так и для Mac и Linux.

к меню ↑

Видео онлайн и CSS3

Для видео онлайн можно применить свойства не только CSS но и CSS3 такие как отражение, маски, градиенты, преобразования, переходы и анимации.

#video {
  border: 1px solid black;
  box-shadow: 0px 0px 10px #fff;
}
к меню ↑

Добавить разделы видео

Бывают случаи когда пользователь не хочет смотреть видео с самого начала, а с какого то момента. Для выбора эпизода видео можно добавить список разделов со снимками из видеоролика. После нажатия на снимок в браузере появится проигрыватель в котором откроется видео с выбранным эпизодом (как меню DVD).

к меню ↑

Добавить подпись и субтитры

Подпись и субтитры находятся внутри видеотега с атрибутом kind. Субтитры можно использовать не только для людей которые не слышат но и для караоке онлайн, используя технологию WebVTT.

<track kind="captions" src="captions.srt" srclang="ru">
к меню ↑

Добавить афишу к видеофайлу

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

<video poster="афиша.png">
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
к меню ↑

Сделать фон видео прозрачным

Видеоформат WebM в браузере позволяет сделать фон видео прозрачным, такая технология одна из самых новых и еще не работает во всех браузерах. Подставляя к прозрачному слою цвет, иллюстрации, изображение, можно продемонстрировать поведение непрозрачного слоя.

Демонстрация на сайте mozilla.org

к меню ↑

Управлять видео с клавиатуры

Чтобы сделать доступ управления видео онлайн с клавиатуры, нужно применить технологию WAI ARIA. В приведенном ниже фрагменте кода для управления с клавиатуры используется атрибут tabindex.

<video tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
к меню ↑

Видео HTML5 и canvas

Видеотеги могут взаимодействовать с другими элементами такими как canvas — это совершенно новый подход. Сanvas drawImage позволяет захватить один кадр из видеопотока.

function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  var img = new Image();
  img.src = canvas.toDataURL("image/png");
  img.width = 120;
  ssContainer.appendChild(img);
}

Также для видео онлайн можно использовать WebGL.

Демонстрация на сайте mozilla.org

Применить чистый JavaScript.

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);
к меню ↑

Видео HTML5 и SVG

С помощью векторной графики можно определить элемент DOM и применить к нему готовые эффекты: размывание, композицию, плитку, маску.

Демонстрация маски для видео

к меню ↑

Запуск воспроизведения и остановка

Функция может запустить или остановить воспроизведение видео в определенный момент времени. Эта функция позволяет сортировать видео спрайт, можно загрузить один видеофайл и воспроизводить определённый отрезок видео. Например, содержание оной страницы сайта тема: игра Battlefield, другая страница сайта на тему: игра Counter-Strike, всё что нужно — это указать по теме отрезок видео.

В примере ниже воспроизведение видеофайла начнётся с 30-й секунды, закончится на 50-й секунде.

<video controls>
    <source src="video.mp4#t=30,50">
</video>
к меню ↑

Видео для фона сайта

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

к меню ↑

Воспроизведение и пауза видео при переключении закладок в браузере

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

к меню ↑

Микроразметка видеоролика

Микроразметка для содержимого веб страниц необходима для поисковых систем, минимальная микроразметка schema.org для видео должна выглядеть примерно так:

<div itemscope itemtype="http://schema.org/VideoObject">
<link itemprop="url" href="ссылка на видеоролик">
     <meta itemprop="name" content="название видеоролика">
     <meta itemprop="description" content="описание видеоролика">
     <meta itemprop="duration" content="продолжительность видео">
     <meta itemprop="isFamilyFriendly" content="не для детей False, для любого возраста True">
     <meta itemprop="uploadDate" content="время загрузки видеофайла на сервер">
  <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
        <meta itemprop="image" content="миниатюра видеоролика">
        <meta itemprop="width" content="250">
        <meta itemprop="height" content="120">
  </span>
</div>
к меню ↑

Оптимизировать видео для поисковых систем

Конечно с такими видеохостингами как YouTube и порталами как ex конкурировать не получится, но своё уникальное видео продвинуть в поисковой системе можно. Для этого нужно подробно описание видео использую тег HTML5 track, чтобы поисковая система знала о чем ваше видео.

<video>
    <source src="video.mp4" type="video/mp4">
    <track kind="metadata" src="metadata1.srt" srclang="ru" label="Описание 1">
    <track kind="metadata" src="metadata2.srt" srclang="ru" label="Описание 2">
</video>
к меню ↑

Заключение

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