HTML5 Video: фрагменти, субтитри та динамічні мініатюри-кадри

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

Медіа-фрагменти

Медіа-фрагменти — інструмент, рекомендований до використання W3C, який допомагає активувати деякі вбудовані можливості браузера для обробки відео.

В наш час цей інструмент використовується для того, щоб керувати місцем початку та кінця програвання відео. Його використання поширене в середовищі розробників ігор на HTML5, де один відео файл може використовуватися за принципом спрайтів, тобто програються лише певні частини відповідно до поведінки користувача.

У цьому простому прикладі початок програвання медіа-фрагмента зазначено в URL самого відео. Ми маємо значення "#t=20", в якому "t" означає "час":

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

У прикладі вище, програвання відео починається з 20-ої секунди. Давайте подивимося на інший приклад:

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

У цьому прикладі програвання почнеться з 6-ої секунди і зупиниться на 20-ій.

Час також може бути зазначено в форматі "hh:mm:ss":

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

Щоб продемонструвати роботу з відео-фрагментами, я буду використовувати відео про підводне плавання довжиною 27 секунд, яке можна умовно розбити на три частини: 00:00 (початок), 00:06 та 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>

Я використав data-атрибути для елементів відтворення та кнопок для більш простої організації поставленого завдання за допомогою JS. Фактично, коли ми натискаємо на елемент, скрипт заново завантажує відеофайл, встановлюючи йому необхідний початок програвання:

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

Ось демо:

(Врахуйте те, що відео-файли розташовані на зовнішньому ресурсі, тому може знадобитися деякий час для того, щоб вони завантажилися.)

See the Pen ZYKeXO by Codeguida (@codeguida) on CodePen.

Додавання підписів або субтитрів

HTML5 включає в себе вбудовані засоби представлення тексту на відео. Реалізується це за допомогою елемента track. У цьому прикладі відео з англійською мовою супроводжено субтитрами іспанською:

<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>

Зверніть увагу на те, що елемент <track> знаходиться всередині <video> і має декілька власних атрибутів: src, label, kind, srclang, та default.

• src — джерело тексту;
• label — назва тексту;
• kind — тип тексту: "subtitles", "captions", "descriptions", "chapters" або "metadata".
• srclang — мова субтитрів, обов'язковий, якщо для атрибуту kind вказано "subtitles"
• default — булеве значення, яке вказує браузеру на те, що цей текстовий файл повинен бути завантажений в першу чергу і використовуватися за замовчуванням.

Текстовий файл, який вказується в src повинен відповідати стандарту Web Video Text Tracks Format (WebVTT). Такий файл — це послідовність сигналів з порожніми рядками між ними. На самому початку файлу вказується сам стандарт. Ось приклад:

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

У кожного сигналу є номер, ім'я і час появи на екрані, вказаний з точністю до мілісекунд. Також варто відзначити, що деякі браузери додають кнопку закриття відео, якщо до нього підключені субтитри. Ви можете подивитися демо тут або тут:

See the Pen WbjpdN by Codeguida (@codeguida) on CodePen.

Динамічні мініатюри на canvas

Ще одна причина використовувати <video> — вбудована можливість глибокої взаємодії з іншими HTML5-елементами.

У цьому прикладі, в документ доданий відео-файл, при програванні якого кожні 5 секунд створюється canvas-елемент зі скріншотом поточного стану відео. Фрагмент розмітки:

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

Ви можете проглянути демо.

Висновки

Ми розглянули декілька можливостей HTML5-відео, про які ви можливо не знали. Якщо вам відомо щось цікаве по цій темі, пишіть про це в коментарях.