HTML5-видео: фрагменты, подписи и динамические миниатюры

Разработчики веб-приложений и приложений, которые хотят больше работать с онлайн-видео, могут обнаружить, что три малоизвестных или, по крайней мере, реже обсуждаемых видео-функций HTML5 могут открыть множество новых и креативных методов для интеграции видео по-новому.

В этой статье я опишу: медиа фрагменты, элемент track и возможность видео HTML5 легко интегрироваться с другими элементами.

Медиа Фрагменты

Медиа-фрагменты или медиа-фрагменты URI — это рекомендация W3C, созданная для включения некоторых аспектов обработки собственного видео в веб-браузерах.

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

В самом простом виде время начала фрагмента мультимедиа добавляется в URL источника видео. Обратите внимание, что в следующем примере «# t = 20» после исходного URL, где «t» представляет временный фрагмент мультимедиа.

<video controls>
    <source src="102614-video-sample.mp4#t=20">
</video>

В приведенном выше коде видео начнется воспроизведение в 00:20 (при условии мм: сс). Давайте посмотрим на другой пример:

 <video controls>
    <source src="102614-video-sample.mp4#t=6,20">
</video>

В приведенном выше примере начнется воспроизведение в 0:06 и будет продолжаться до 0:20.

Значения времени в src

 <video controls>
    <source src="102614-video-sample.mp4#t=00:00:20">
</video>

Чтобы продемонстрировать фрагменты медиа, у меня есть 27-секундное видео с подводным плаванием, в котором есть три довольно очевидных перехода. Первый раздел начинается в начале видео (00:00:00), следующий раздел начинается примерно в 00:00:06, а третий переход происходит примерно в 00:00:17.

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

Ниже вы найдете видео код вместе с навигацией:

 <video id="frag1" controls preload="metadata" width="720px" height="540px">
    <source src="102614-video-sample.mp4"
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'
            data-original="102614-video-sample.mp4">
    <source src="102614-video-sample.webm"
            type='video/webm;codecs="vp8, vorbis"'
            data-original="102614-video-sample-webmhd.webm">
</video>

<div class="nav">
    <button data-start="0">Section One</button>
    <button data-start="6">Section Two</button>
    <button data-start="17">Section Three</button>
</div>

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

 function mediaFragOne() {
    var video, sources, nav, buttons;
    video = document.querySelector('video#frag1');
    sources = video.getElementsByTagName('source');
    nav = document.querySelector('video#frag1+nav');
    buttons = nav.getElementsByTagName('button');

    for (var i = buttons.length - 1; i >= 0; i--) {
        buttons[i].addEventListener('click', function() {
            for (var i = sources.length - 1; i >= 0; i--) {
                sources[i].setAttribute(
                    'src', (sources[i].getAttribute('data-original')
                    .concat('#t=' + this.getAttribute('data-start'))));
                    video.load();
                    video.play();
            };
        });
    };
}
mediaFragOne();

Вот демо:

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

 <video id="Subtitle" controls preload="metadata">
   <source src="102614-maui-with-words.mp4" type="video/mp4">
   <source src="102614-maui-with-words.webm" type="video/webm">
   <track src="102614-maui-es.vtt"
          label="Español Subtítulos"
          kind="subtitles" srclang="es" default>
   </track>
</video>

 WEBVTT FILE

1
00:00:03.000 --> 00:00:04.500
Este material de buceo

2
00:00:04.600 --> 00:00:07.900
fue filmada en el cráter Molokini

3
00:00:08.000 --> 00:00:09.500
Maui, Hawaii

 <video id="thumb" controls preload="metadata" width="750px" height="540px">
    <source src="102614-video-sample.mp4" 
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="102614-video-sample-webmhd.webm"
            type='video/webm;codecs="vp8, vorbis"'>
</video>
<canvas id="canvas" 
        width="750px" height="540px"
        style="display:block;">
</canvas>
<div id="screenShots"></div>

 var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot);
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
video.addEventListener("ended", stopScreenshot);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;

function initScreenshot() {
  videoHeight = video.videoHeight; 
  videoWidth = video.videoWidth;
  canvas.width = videoWidth;
  canvas.height = videoHeight;
}

function startScreenshot() {
  if (drawTimer == null) {
    drawTimer = setInterval(grabScreenshot, 1000);
  }
}

function stopScreenshot() {
  if (drawTimer) {
    clearInterval(drawTimer);
    drawTimer = null;
  }
}

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);
}