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

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

Новости видео HTML5

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

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



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


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

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

У веб-разработчиков теперь есть много возможностей улучшить видео онлайн:

  • видео онлайн и CSS3
  • добавить разделы видео
  • добавить подпись и субтитры
  • добавить афишу к видеофайлу
  • сделать фон видео прозрачным
  • сделать управление с клавиатуры
  • вместе использовать видео HTML5 и canvas
  • вместе использовать видео HTML5 и SVG
  • время начала воспроизведения и остановка видео
  • применить видео для фона сайта
  • воспроизведение и пауза видео при переключении закладок в браузере
  • семантическая разметка
  • оптимизировать видео для поисковых систем

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

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



#video {
  border: 1px solid black;
  box-shadow: 0px 0px 10px #fff;
}


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

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

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

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



<track kind="captions" src=
http://www.pixelcom.crimea.ua/"captions.srt" srclang="ru">


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

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



<video poster="афиша.png">
  <source src=
http://www.pixelcom.crimea.ua/"video.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>


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

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

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

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

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



<video tabindex="0">
  <source src=
http://www.pixelcom.crimea.ua/"movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src=
http://www.pixelcom.crimea.ua/"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=
http://www.pixelcom.crimea.ua/"video.mp4#t=30,50">
</video>


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

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

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

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

Семантическая разметка видеоролика

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



<div itemscope itemtype="http://schema.org/VideoObject">
<link itemprop="url" href=
http://www.pixelcom.crimea.ua/"ссылка на страницу с видеороликом">
     <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 конкурировать не получится, но своё уникальное видео продвинуть в поисковой системе можно. Для этого нужно подробно описание видео, чтобы поисковая система знала о чем ваше видео.



<video>
    <source src=
http://www.pixelcom.crimea.ua/"video.mp4" type="video/mp4">
    <track kind="metadata" src=
http://www.pixelcom.crimea.ua/"metadata1.srt" srclang="ru" label="Описание 1">
    <track kind="metadata" src=
http://www.pixelcom.crimea.ua/"metadata2.srt" srclang="ru" label="Описание 2">
</video>


Заключение

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

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://www.pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>