本文是由Tom Greco和Marc Towler进行同行评审的。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!
由于对本机视频元素及其API的支持相当全面 ,因此现在是一个绝佳时机,您可以研究可以利用视频为用户创建精美且互动的方式的方法。
在整篇文章中,我们将研究API的基础知识,在掌握了相关知识之后,我们将研究一个实际示例。 这将是一个多视频滑块,其中一个接一个地播放视频,并在播放时无缝地加载内容并设置动画效果。
视频API –简介
本质上,当我们谈论视频API时,实际上是在谈论媒体API —一种JavaScript API,它使您可以与网页上的音频和视频元素进行交互。
该API实现了一个称为HTMLMediaElement的接口,该接口添加了支持音频和视频常用的基本操作(例如加载媒体,更改查找位置,完成播放等)所需的属性 , 方法和事件 。 HTMLVideoElement和HTMLAudioElement都对其进行了扩展,它们提供了自己的特殊属性和方法。
我们主要关注video
元素,因此我们将专注于与API此部分的交互。 要感受一下API,您可以访问Interactive HTML5 Video Example页面,其中展示了最常用的元素。
浏览器支持
虽然Chrome,Firefox,Safari,Opera和Internet Explorer都支持视频元素,但是它们可以播放的格式有所不同,每个浏览器都有其支持的视频格式列表,这些列表也可能基于浏览器本身的版本。
在撰写本文时,所有现代台式机和移动浏览器都将播放mp4
格式。 另外,大多数浏览器将长期支持ogg
或webm
格式(或同时支持这两种格式)。 这是当前支持状态的综合概述 。
虽然仅提供mp4
版本就可以解决问题,但您可能应该同时包含ogg
和webm
格式作为全面的解决方案。
互动视频展示
我们将使用video
元素创建展示功能。 我们的展示柜将连续播放一系列小型视频片段,并在特定时间触发动画。 使用这样的视频元素,我们将研究其某些属性,方法和事件,并显示使用此API可以实现的控制级别。
像往常一样,您可以在我们的GitHub存储库中找到本教程的代码,以及在文章结尾处的完成展示的演示 。
构建HTML布局
我们的滑块示例将依次播放每个视频,并在播放时淡化每个视频的相关字幕。 如果我们不支持视频播放/在移动设备上,我们将退回到静态图像,为字幕文本添加字幕。
为滑块创建轮廓包装器,并在其中添加要定义的每个视频部分
<!--Main video wrapper-->
<div class="video-wrapper" id="video-container">
<!--first video-->
<div class="video-container"></div>
<!--second video-->
<div class="video-container"></div>
<!--Nth video-->
...
</div>
每个视频部分的标记
对于我们要播放的每个视频,我们都必须设置一些元素,以便我们可以显示视频,淡入字幕元素并跟踪视频的整体进度。
<!--Progress bar-->
<div class="progress-bar">
<div class="progress">
<div class="progress-inner">
<span class="progress-time"></span>
<span class="progress-value"></span>
</div>
</div>
</div>
<!--Progress bar overlay-->
<div class="progress-overlay"></div>
<!--Video Elements-->
<video preload="none">
<source src="videos/video1/video1.mp4" type="video/mp4">
<source src="videos/video1/video1.webm" type="video/webm">
<source src="videos/video1/video1.ogg" type="video/ogg">
</video>
<!--Video overlay-->
<div class="overlay"></div>
<!--Caption Elements-->
<div class="caption">
<h1 data-animation-percent="10">Amazing New Adventures</h1>
<h3 data-animation-percent="20">Come visit new parts of the world</h3>
<p data-animation-percent="40">
Don't wait, there is a wide world out there that you can explore!
Contact us to see what we can do
</p>
<div class="readmore" data-animation-percent="60">Find out more</div>
</div>
video元素将包含video
标签,并将其所有source
子对象设置为不同的数据类型,以最大程度地实现兼容性。 阅读有关添加对多种视频格式的支持的更多信息。
字幕元素将包含您要在视频播放时淡入的所有标记。 您可以添加任何内容,但必须具有data-animation-percent
属性,其值介于0
到100
之间。 这将告诉滑块使元素淡入的视频完成百分比。
进度条显示当前的视频进度(以秒和百分比显示)。 这将定期更新。 该栏将是交互式的; 当您将鼠标悬停在它上面时,视频将暂停,您将可以浏览它,从而更新视频位置。
为移动浏览器提供后备
为了帮助涵盖所有基础,我们还将设置一个后备元素,以在当前浏览器是移动设备的情况下使用。
在主视频包装程序结束之前添加以下标记
<!--Fallback-->
<div class="fallback-container">
<div class="image"></div>
<div class="overlay"></div>
<div class="caption">
<h1 data-animation-percent="15">This is a title</h1>
<h3 data-animation-percent="25">Fallback when you dont support autoplay!</h3>
<p data-animation-percent="50">Come and see a wide range of tasks and activities</p>
<div class="readmore" data-animation-percent="70">Act now!</div>
</div>
</div>
此功能的作用类似于我们的视频。 当用户加载页面时,我们将触发其所有标题元素淡入淡出,具体取决于在data-animation-percent
属性中设置的值。 我们使用的是背景图片,而不是视频。
检测移动浏览器
我们的滑块将使用video元素的autoplay
属性自动播放第一个视频。 但是,大多数移动浏览器会阻止此功能(以限制数据使用),这意味着最好的策略是检测我们是否在移动设备上,并相应显示备用内容。 通常,我们将使用功能检测来执行此操作,但是, 检测对autoplay属性的支持非常棘手 。
尽管浏览器/ UA嗅探可能很丑陋,但这将为我们提供一种方法,可以根据已知的移动设备列表测试当前的浏览器,并从中检测我们应该如何进行。 我们可以使用以下正则表达式来做到这一点:
var mobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|IEMobile/i);
然后我们可以这样使用它:
if(!mobile){
//main video slider functionality
} else {
//fallback functionality
}
当前和下一个视频设置
注意 :对于JavaScript功能,我使用的是jQuery,因此请自己获取一个副本并将其包含在页面底部。
一旦我们很高兴,我们是无法在手机上我们搜索所有我们与元素的video-container
类和集合指派给我们的videos
变量。 这些元素将成为每个视频及其字幕内容的主要包装。 然后,我们找到每个容器的video
元素,并将其分配给本地video
变量。
现在我们有了当前的视频,我们需要找到下一个视频元素,以便我们可以触发它开始加载并在当前视频结束时播放它。
如果我们还有另一个video-container
元素, nextVideo
分配给nextVideo
变量。 如果没有其他video-container
元素,我们将循环回到第一个。
var videos = $('.video-container');
videos.each(function(index){
var video = $(this).find('video'),
nextVideo;
if(index !== (videos.length - 1)){
nextVideo = $(this).next('.video-container').find('video');
} else {
nextVideo = videos.first().find('video');
}
});
您可以根据需要添加任意数量的video-container
元素,并定义其他视频和字幕。 滑块将找到下一个视频并创建循环,使其无限期地继续播放。
开始播放第一个视频的视频
对于我们的第一个视频,我们需要进行一些设置,以使所有内容都动起来。
- 我们将
active
类添加到第一个视频的.video-container
中(此视频具有相对位置的样式,以便显示它) - 将视频的
preload
属性设置为auto
以告知浏览器开始获取视频 调用视频的
play()
方法,以便立即开始播放
//first video, preload and play
if(index === 0){
video.parents(‘.video-container’).addClass(‘active’);
video[0].preload = ‘auto’;
video[0].play();
}
视频的帮助程序变量
对于每个视频,我们需要设置一些变量,我们将在以后的活动中使用这些变量
var caption = video.siblings('.caption');
var captionItems = caption.find('[data-animation-percent]');
var videoBar = video.siblings('.progress-bar');
var dragging = false;
var nextLoaded = false;
-
caption
是所有动画字幕元素的容器 -
captionItems
包含将在播放期间设置动画的每个元素 -
videoBar
指每个视频上的进度条(稍后在我们的活动中使用,以可视方式更新正在发生的事情) - 在我们搜索/跳过视频以更改其播放位置时,将使用
dragging
- 将使用
nextLoaded
以便我们知道何时已经开始在当前视频播放的结尾加载下一个视频(避免多次调用load()
)
timeUpdate事件
在播放视频时,它会定期调用timeupdate事件。 我们将使用此事件进行一些处理:
$(video).on('timeupdate', function(){
//processing to go in here
});
在回调(我们将传递给jQuery的on
方法的匿名函数)中,我们想要获取当前视频的时间。 我们通过找到视频的currentTime并将其除以持续时间乘以100来设置videoTime
变量。这将使我们知道视频的完整程度。
var videoTime = ((this.currentTime / this.duration) * 100);
触发字幕元素的动画
如果当前视频具有字幕元素,我们将需要检查视频的当前时间,以查看是否应该使元素处于活动状态或非活动状态。
在我们的函数中,我们添加以下内容
$(video).on('timeupdate', function(){
var videoTime = ((this.currentTime / this.duration) * 100);
if(captionItems.length > 0){
captionItems.each(function(){
var item = $(this);
var animTime = parseInt(item.attr('data-animation-percent'));
if(videoTime >= animTime){
item.addClass('active');
} else {
item.removeClass('active');
}
});
if(captionItems.filter('.active').length !== 0){
caption.addClass('active');
} else {
caption.removeClass('active');
}
if(videoTime >= 90){
caption.removeClass('active');
captionItems.each(function(){
$(this).removeClass('active');
});
}
}
});
这是我们正在做的事情的分解
- 如果
captionItems
的长度大于0
则意味着我们有需要跟踪的元素。- 对于每个
captionItems
我们需要收集存储在其data-animation-percent
属性中的值,并将其分配给animTime
(该值应介于0
到100
之间)。 - 如果当前
videoTime
大于元素animTime
则需要通过添加active
类来使元素活动。
- 对于每个
- 我们还获得了
captionItems
集合,并使用jQuery的.filter方法检查我们是否有任何active
类项目。 如果这样做,我们想将活动类添加到字幕包装器(caption
变量)。 - 我们还会检查当前的
videoTime
是否大于90
(这意味着我们完成了90%)。 如果我们快要结束了,我们将遍历所有标题并删除其active
类,并将其从caption
删除
加载下一个视频
在同一个timeupdate
事件中,我们还想检查当前视频的时长,看看是否应该开始加载下一个视频。
if(videoTime >= 70 && nextLoaded === false){
nextVideo.preload = 'auto';
nextVideo.load();
nextLoaded = true;
}
您可以在完成的演示中看到它的运行情况-下一个视频应该在当前视频的大约70%完成时出现/加载到控制台的“网络”标签中,并在结束事件触发触发播放前几秒钟。
播放期间更新进度条
由于我们希望进度条经常更新,因此我们不能将其放在timeupdate
函数中(因为浏览器确定了它的调用方式)。 相反,我们调用setInterval并将其分配给我们的videoInterval
变量。 每隔100毫秒,我们将调用updateProgressAuto
函数并传递当前正在播放的视频
setInterval(function(){
updateProgressAuto(video);
}, 100);
使用UpdateProgressAuto自动更新进度栏
每隔100毫秒,进度条将需要更新。 为此,我们使用此功能。
function updateProgressAuto(video){
var videoBar = $(video).siblings('.progress-bar');
var videoPercent = ((video[0].currentTime / video[0].duration ) * 100);
videoBar.find('.progress').css('width', videoPercent + '%');
videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + ' : ' + parseFloat(video[0].duration).toFixed(2));
videoBar.find('.progress-time').html(parseInt(videoPercent) + '%');
}
这是怎么回事。
- 我们正在获取进度条元素,并通过将视频的
currentTime
乘以其duration
并乘以100来找到videoPercent
。 - 我们更新进度条的宽度以反映
currentTime
百分比 - 我们会更新视频的当前时间/时长,以便确切知道视频何时结束。
- 我们用当前百分比更新视频栏上显示的百分比
即将结束的事件
当前视频结束时,将触发onEnded事件。 在这里,我们将活动类切换到nextVideo
的容器,然后调用其play
功能以开始播放
video[0].onended = function() {
nextVideo.parents('.video-container').addClass('active');
video.parents('.video-container').removeClass('active');
nextVideo[0].play();
};
手动更新视频的播放
作为一项附加功能,滑块还允许您手动浏览视频,并在单击或拖动时更改其当前播放时间(让您快退或快进视频)。
我们将多个事件处理程序绑定到videoBar
变量的click
, mousedown
, mouseup
和mousemove
事件。 目的是转换鼠标的点击位置/拖动位置以更新视频的位置。
//seeking with the video bar
videoBar.on('click', function(e){
updateProgressManual((e.pageX - $(this).offset().left) , video);
});
//mouse moving
videoBar.on('mousedown',function(e) {
dragging = true;
updateProgressManual(e.pageX - $(this).offset().left, video);
});
//mouse up (choose time to seek to)
videoBar.on('mouseup',function(e) {
dragging = false;
updateProgressManual(e.pageX - $(this).offset().left, video);
});
//mouse dragging (actively seeking)
videoBar.on('mousemove',function(e) {
if(dragging === true){
updateProgressManual(e.pageX - $(this).offset().left, video);
}
});
所有这些事件都调用updateProgressManual
函数,该函数将更新视频的播放时间。 我们收集的值将是当前pageX
位置减去视频栏的当前左offset
(这将为我们在进度栏上提供正确的位置)
使用UpdateProgressManual函数手动更新播放
当我们手动搜索当前视频时,将调用此函数。 目的是获得被点击的位置,并将其转换为视频应寻求的时间。
//Manually updates the video when we seek using the progress bar
function updateProgressManual(progressBarPosition, video){
var videoBar = $(video).siblings('.progress-bar');
var videoPercentage = ((progressBarPosition / videoBar.outerWidth()) * 100);
videoBar.find('.progress').css('width', videoPercentage + '%');
videoBar.find('.progress-value').html(parseFloat(video[0].currentTime).toFixed(2) + " : " + parseFloat(video[0].duration).toFixed(2));
videoBar.find('.progress-time').html(parseInt(videoPercentage) + '%');
video[0].currentTime = ((video[0].duration * videoPercentage) / 100);
}
这是正在发生的事情的分解
- 我们计算
videoPercentage
通过获取位置通过的电流,将其除以outerWidth
视频棒次的100。这将告诉我们,我们要寻求什么样的百分比。 - 我们将
videoBar
内的progress
元素的宽度设置为我们要寻找的百分比。 - 我们还希望更新栏中的视觉播放时间。 通过获取视频的
currentTime
和时duration
- 最后,我们设置视频的
currentTime
值以使视频在指定的时间段内搜索。
附加功能
滑块还具有一些其他有用的功能。
当videoBar
与我们的鼠标相交时,我们将展开进度条,以使其更易于单击/拖动(以查找视频)。 此外,我们还暂停了视频并激活了叠加层。 当鼠标移开时,所有内容都会还原,开始播放并删除类。
我们还将检查您是否将鼠标移到caption
区域及其元素上。 如果字幕当前处于活动状态,它将通过playbackRate
属性减慢视频playbackRate
速度(使其播放速度减半)。 当我们将鼠标移开时,视频将恢复为正常速度。
//When hovering over progress bar, pause video and restyle
videoBar.on('mouseover', function(){
$(this).siblings('.progress-overlay').addClass('active');
$(this).addClass('expanded');
video[0].pause();
});
//When not hovering, unpause video and restyle back to normal
videoBar.on('mouseout', function(){
$(this).siblings('.progress-overlay').removeClass('active');
$(this).removeClass('expanded');
video[0].play();
});
//if we have caption elements, slow playback on hover
if(captionItems.length !==0){
video.parents('.video-container').on('mouseover','.caption.active', function(){
video[0].playbackRate = 0.5;
});
video.parents('.video-container').on('mouseout','.caption.active', function(){
video[0].playbackRate = 1;
});
}
我们的仅移动后备内容
如果我们在移动设备上,则不会显示视频,而是会显示后备内容。 您可以通过将mobile
变量设置为true来在演示中对此进行测试。
大多数功能类似于我们处理每个视频的方式。 我们寻找其所有元素,然后确定何时需要淡入。
var fallbackInterval = setInterval(function(){
currentTime = (parseInt(currentTime) + timeInterval);
fallbackElements.each(function(){
var animationPercent = parseInt($(this).attr('data-animation-percent'));
if((currentTime / animationDuration * 100) >= animationPercent){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
//if we have any caption elements faded in
if(fallbackElements.filter('.active').length !== 0){
fallbackElements.parents('.caption').addClass('active');
}
//if we have ended, finish
if(currentTime >= animationDuration){
clearInterval(fallbackInterval);
}
}, timeInterval);
让我们来看看发生了什么
- 我们找到
fallback
和fallbackElements
并将fallback
容器设置为激活状态。 - 我们将
currentTime
设置为0
,这给了我们开始时间。 然后,我们将animationDuration
设置为5000
以指示完整的动画将花费5秒钟。 最后,我们将timeInterval
设置为50
,这意味着每50毫秒我们将进行一次更新。 - 我们使用
setInterval
函数创建主循环(将其分配给fallbackInterval
变量)。 我们将间隔设置为每50ms运行一次。 - 在主间隔内,我们获得新的当前时间(通过将
timeInterval
添加到currentTime
变量中)。 - 我们对照此新时间的百分比检查每个标题元素,以查看是否应激活此元素。
- 如果
currentTime
大于animationDuration
,则使用clearInterval清除fallbackInterval
以完成所有操作。
演示版
最后,这是完成展示的演示。 您可以单击视频以切换播放。
请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Video API交互式展示 。
从这里到哪里?
现在,您已经了解了如何使用Video API创建有趣的元素,您可以从中获取示例代码并将其扩展以使其更加出色。
您可以做很多事情来改善这一点,其中一些是:
- 创建一个更精美的动画,在字幕元素淡入时将其应用到字幕元素。您还可以创建多个不同的动画,以防它们有所区别。
- 如果您使用手机,则可以提供完全不同的体验。 也许您可以具有图像滑块或其他一些交互式内容。
- 您可以尝试为多个备用容器提供自己的图像和内容,以模仿视频滑块的功能。
- 使用API中的其他事件,方法和属性可以使滑块更好。
如果您最终想与我们分享一些很棒的东西,在下面的评论中,我很乐意听取您的意见。
From: https://www.sitepoint.com/interactive-video-showcase-video-api/