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

Ось демо:

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

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

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

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

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

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

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

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

    <video controls="" height="540px" id="thumb" preload="metadata" width="750px">
        <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 height="540px" id="canvas" style="display:block;" width="750px">
    </canvas>
    <div></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-відео, про які ви можливо не знали. Якщо вам відомо щось цікаве по цій темі, пишіть про це в коментарях.