html视频缩略图
想要对在线视频做更多工作的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元素描述要添加的文本类型,并提供文本源。
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
在此示例中,包含英语口语的视频具有默认情况下显示的西班牙语字幕轨道。
<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的示例。
请参阅CodePen上带有SitePoint 字幕的Pen HTML5视频 ( @SitePoint )。
要更全面地了解这些功能,请查看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” 。 视频来自我最近到夏威夷毛伊岛的旅行。
翻译自: https://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/
html视频缩略图