HTML5视频：片段，字幕和动态缩略图

想要对在线视频做更多工作的Web和应用程序开发人员可能会发现，三个鲜为人知的（或至少很少被讨论的）HTML5视频功能可能会开启许多新颖的技术，以新的方式集成视频。

在本文中，我将描述：媒体片段，track元素以及HTML5视频轻松与其他元素集成的能力。

媒体片段

媒体片段或媒体片段URI 是W3C推荐的 ，旨在在Web浏览器中启用本机视频处理的某些方面。

目前，此功能可用于在特定的时间点开始或结束视频播放。 可以想象到此功能将启用一种视频精灵，例如，允许HTML游戏开发人员加载单个视频文件，但可以根据播放器的动作轻松播放不同的部分。

媒体片段的开始时间以最简单的形式添加到视频源URL。 请注意，在以下示例中，源URL后的“＃t = 20”，其中“ t”表示时间媒体片段。

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

在上面的代码中，视频将从00:20（假设mm：ss）开始播放。 让我们看另一个例子：

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

上面的示例将从0:06开始播放，并继续播放直到0:20。

src URI中的时间值也可以以时分秒格式（hh：mm：ss）指定：

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

这是演示：

（请注意，由于视频文件是在外部托管的，因此加载单个文件时会有一些延迟，因此请给演示一些时间来显示视频。）

请参阅CodePen上 SitePoint（ @SitePoint ）的Pen c376d7feb0826d02d244046ed0e7bd77 。

注意：如果上述演示不起作用，请尝试使用此外部演示 。

添加字幕或字幕

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提供定时文本文件的URL。 由于明显的原因，这是必需的。
• label是曲目的标题。 它可以呈现给用户。
• kind的值必须为“字幕”，“标​​题”，“描述”，“章节”或“元数据”。
• srclang表示轨道文本的语言，当将kind设置为“ subtitles”时是必需的。
• default是一个布尔属性，它告诉浏览器此文本轨道应在最初加载。

src中链接的文本轨道文件为Web视频文本轨道格式（WebVTT） 。 从根本上讲，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

WebVTT文件中的每个提示都可以有一个数字或名称。 文本在屏幕上显示的时间间隔以小时，分钟，秒和毫秒的格式描述。

最后，我还要注意，在某些浏览器中，包括字幕在内的视频控件都会添加一个隐藏字幕按钮。

您可以在此位置查看演示以获取适用于Chrome的版本 ，也可以查看下面的CodePen示例以获取适用于Firefox的示例。

见笔HTML5视频字幕由SitePoint（ @SitePoint上） CodePen 。

要更全面地了解这些功能，请查看Ankul Jain的文章，内容涉及HTML5的track元素 。

带画布的动态缩略图

使用HTML5视频的一个显着优势是，它可以通过第三方插件无法与其他HTML元素进行交互。

例如，在2010年，负责Google开发人员关系的Pete LePage 描述了如何一起使用HTML5视频和canvas 。

在LePage的示例中，将视频添加到HTML文档，创建了canvas元素，然后每五秒钟捕获一次屏幕图像并将其显示在屏幕上。 这是HTML的相关部分：

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

LePage演示中的JavaScript包括几个事件侦听器，变量和函数：

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

在演示中， canvas元素设置为display: none ，这意味着我们只能看到调整后的缩略图，而不是原始的画布图像。 该演示可能需要花一点时间才能加载，但确实显示了使HTML5视频与其他HTML元素一起使用相对容易。

在此处查看动态缩略图演示

结论

总结了3个HTML5视频功能，也许您还没有使用过。 如果您知道有关HTML5视频的其他有趣且鲜为人知的技巧，我们很乐意在评论中听到它们。

鸣谢：示例视频中使用的音乐是Thaiz Itch的“练习曲No.5 – 5. SA-GA-MA-PA-NI-SA” 。 视频来自我最近到夏威夷毛伊岛的旅行。

From: https://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/