睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

HTML5多媒体组件的使用——第三部分:自定义控件

作者:睿美印象网站建设工作室  发布日期:2012-10-27
要求
必备知识
熟悉 HTML 和 JavaScript。

用户级别
中级

范例文件
custom-controls.zip (15.1 MB)
 
 

这是关于HTML5的系列教程的第三部分(共3部分)。在第一部分和第二部分,讲到了 video 和 audio 元素,简短的展示了如何给这些元素添加 controls 属性,以此来给浏览器的媒体(media)元素设置默认值。如果已试过,那应该注意到了各个浏览器的默认外观并不一样。

如果你希望你的媒体元素在各浏览器下有相同的样式,就可以使用HTML5媒体元素的方便的API。你可以使用标准的HTML和CSS来控制媒体的外观, 并用 media元素的API来控制 audio 和 video 元素。


此篇教程详细的描述了构建一个自定义媒体播放器的各个步骤,添加一些特点和功能,使用不同的API属性,事件和方法。你可以先看看这个案例 的最终结果,在此文章的示例附件中(见原文章地址中)。

注意:这篇教程使用了视频元素,但是音频的处理也是同理可得的。


开始

第一步,就是先定义一个video元素。


 
<video id="video" controls>  
<source src="grass-in-the-wind-sma.mp4" type="video/mp4"> 
<source src="grass-in-the-wind-sma.webm" type="video/webm">  
</video> 

注意,这里给你的视频元素标签中添加了 controls 属性,然后自定义的控制就需要用到javascript,先通过js把它的默认设置关闭。 这样的话,即便用户把js给屏蔽了,他们也能使用浏览器自带的默认控制。

要通过js来关闭默认的控制,只需把 video 元素的 controls 属性设置为 false 即可:


 
<script>  
// Grab a handle to the video var video = document.getElementById("video");  
// Turn off the default controls video.controls = false;  
</script> 

接下来,准备继续前进!


添加播放和暂停功能

对大多数播放器来说,最基本的需求就是播放和暂停。在这个例子中,我们只用一个按钮,在暂停的时候它显示为”播放”,在播放的时候它是”暂停”。


 
<div id="controls"> 
<button id="playpause" title="play">Play</button> 
</div> 

然后,就创建一个js函数,来改变button的title属性和实现播放和暂停的功能。

在这个例子中,函数的名字叫做 togglePlayPause()。仔细的看看下面的代码,详细的解释在下面:


 
function togglePlayPause() { 
    var playpause = document.getElementById("playpause"); 
    if (video.paused || video.ended) { 
        playpause.title = "pause"; 
        playpause.innerHTML = "pause"; 
        video.play(); 
    } else { 
        playpause.title = "play"; 
        playpause.innerHTML = "play"; 
        video.pause(); 
    } 


想要这个函数在每次点击播放/暂停按钮时都被调用的话,你就把它添加到button标签的 onclick 事件中:


 
<button id="playpause" title="play" onclick="togglePlayPause()">Play</button> 

togglePlayPause() 函数的第一行包含一个针对play/pause按钮自身的处理器,并将它赋值给变量playpause:


 
var playpause = document.getElementById("playpause"); 

接下来,它通过两个属性 paused 和 ended检查视频的状态,看看它是否是暂停或者停止。如果视频处于这两个状态,它就会设置按钮的 title 和 innerHTML 属性为 "pause",并调用 video.play() 来播放视频。

如果视频目前不是暂停和结束状态,那么你会假设它正在播放。在这种情况下,这个函数设置按钮的 title和 innerHTML 为 "play",并调用 video.pause() 来暂停视频。


按钮的默认文本为 “play”。当这个按钮被第一次点击,视频就会开始播放,接着按钮的文本就会变为 “pause” ,接着当暂停按钮被点击时,视频就会暂停,按钮文本会变回 “play”。

正如你所见,在本教程接下来的功能介绍中都遵循同样的基本模式:给 video 元素添加侦听器,检查元素的当前状态,然后调用API方法。


添加音量控制和静音按钮

播放器的另一个极其重要的功能就是控制音量的大小,包括静音的功能。

要添加音量控制,你只需要使用HTML5的新的<input>标签类型range:<input type=”range”/>。这一个input的类型会被浏览器渲染为一个滑动条,用户可以 左右滑动,你可以通过 min 和 max 属性来指定最小值和最大值,然后用 step 属性来设置每动一下的滑动大小。可以用下面的代码来创建一个范围为0到1的, 步进大小为0.1的滑动条:


 
<input id="volume" min="0" max="1" step="0.1" type="range" /> 

当滑动条滑动时,需要调整音量大小,只需要设置标签的 onchange 属性来调用js侦听器即可:


 
<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> 

然后创建一个js函数,并取名为 setVolume():


 
function setVolume() { 
var volume = document.getElementById("volume");  
video.volume = volume.value; } 

这个简单的按钮含有一个处理音量滑块的控制器,并将它的值赋给 video 元素的 volume 属性。

注意: 火狐 7 不支持 range 类型,而是以一个文本字段代替。这时可以手动的写入音量的值(0–1),然后鼠标点击其他地方(让他失去焦点),就会实现相同的调整音量的效果了。

添加静音按钮也是很简单的。还是定义一个新的按钮,这次需要一个 onclick 处理器:


 
<button id="mute" onclick="toggleMute()">Mute</button> 

接着创建一个名为 toggleMute() 的函数:


 
function toggleMute() {  
    video.muted = !video.muted;  


这个功能设置 视频 元素的 muted 属性(布尔变量)为当前值的相反值。这样就切换了按钮的静音状态。很简单!


添加播放进度条

用户习惯于在看视频时查看已经播放了多少,和还剩多少。

给你的播放器添加一个简单的进度条,可以用 div 标签和 span 标签。可以增加 span 的宽度来显示视频的进度。


 
<div id="progressBar"> 
    <span id="progress"></span> 
</div> 

当然,你也希望用一些css,这样才能看出span的效果:


 
#progressBar {  
  border:1px solid #aaa; color:#fff;  
  width:295px; height:20px;  

#progress {  
  background-color:#ff0000; 
  // red height:20px;  
  display:inline-block;  


然后,定义一个函数,它能够通过改变 span 元素的 width 来更新进度条。


 
function updateProgress() { 
    var progress = document.getElementById("progress");  
    var value = 0;  
    if (video.currentTime > 0) {  
        value = Math.floor((100 / video.duration) * video.currentTime);  
    } 
    progress.style.width = value + "%"; 


这个函数的第一行包含一个控制器来处理进程 span 元素自身。它检查 video 元素的 currentTime 属性值,这个值定义了当前的播放位置,以秒来记。如果 currentTime 大于 0表示视频已经被播放,它使用video 元素的 duration 属性来计算当前进度的百分数,duration 属性定义了视频的总长度,以秒来计算。最后,它将结果赋值给进程 span 的CSS width 。

在上面的播放,暂停,静音等时,你可以使用如 onclick 和 onchange 等事件来调用相应的函数。但是这个进度条却不行,因为这是视频进度的响应,而非和用户交互。


当然,HTML5的媒体元素API也增加了几个可以侦听的事件来实现该功能。其中一个就是 timeupdate 事件,每当 currentTime 属性改变的时候就会触发出此事件。(即当媒体开始播放后就会连续不断的触发。)

在你的web页的JavaScript初始化代码中,当 timeupdate 事件被激活时,添加一个事件监听器来调用updateProgress 函数:


 
video.addEventListener("timeupdate", updateProgress, false); 

现在,你的进度条就会随着视频的播放而不断更新。


监听事件

Media元素的API定义了许多的事件,你可以用他们来完善你的播放器。完整的事件列表可以查看 W3C’s summary of media element API events。表1中列出了几个常用的事件:


Table 1. 媒体元素 API 事件


事件名 描述
playing 当媒体以前被暂停,现在要开始重新播放时触发
ended 当媒体播放完停止时触发
timeupdate 当媒体当前的播放位置被改变时触发
play 当以前暂停的媒体不再是暂停和播放已恢复时触发
pause 当返回 pause() 方法,而且媒体已经被暂停时触发
volumechange 当媒体的 音量 和 静音 属性改变时触发

当你使用自定义控制机制的时候,监听一些可用的事件来确保你的视频状态是实时同步的,这将会是一个比较好的体验。

控制界面怎么会不同步?当你用js关闭了它们默认的控制之后,并由用户打开这些控制并使用它们和视频交互,就存在这种可能了。比如,在火狐下,除了 这些控制之外,还可以在视频上右击,然后会有相应的控制选项,播放,暂停等等。如果用户点击了这些选项,你刚才自定义的界面就有可能不能实时的反映当前的 视频状态了。


但是不管用哪种方法控制,相对应的事件总是会被触发的,因此,你可以监听 pause 和 play 事件来实现同步,如:


 
video.addEventListener(play, function() { 
  var playpause = document.getElementById("playpause"); 
  playpause.title = "pause"; 
  playpause.innerHTML = "pause"; 
}, false); 
 
video.addEventListener(pause, function() { 
  var playpause = document.getElementById("playpause"); 
  playpause.title = "play"; 
  playpause.innerHTML = "play"; 
}, false); 

你也应该监听 ended 事件,这样当视频结束时,play/pause按钮可以实时更新。当 ended 事件被触发时,你可以调用视频的 pause() 方法来实现这个功能。


 
video.addEventListener(ended, function() {  
this.pause(); 
}, false); 

注意: 之所以在这里调用 pause() 方法,是因为如此一来就可以触发 pause 事件了,这又由此导致了我们上面所写的 pause 事件控制器代码的调用。当然你也可以把代码全部拷贝到 ended 的侦听器里面,或者,如果你有其他的需求或扩展,你在这里定义它。


添加播放列表

最后一个功能就是媒体播放列表,用户可以用它来改变在媒体播放器中的视频。这也很简单。首先你要定义你的播放列表,例如:


 
<ul id="playlist"> 
  <li><a href="#" onclick="playlistClick(grass-in-the-wind-sma);">Grass blowing in the wind</a></li> 
  <li><a href="#" onclick="playlistClick( ree-in-the-wind-sma);">Trees blowing in the wind</a></li> 
</ul> 

在播放列表里有两个条目,当被点击时,每一个都会调用名为 playlistClick() 的函数。这个函数只有一个参数,就是要播放文件的地址(没有扩展名)。这个函数的定义如下:


 
function playlistClick(file) { 
    var v = document.createElement("video"); 
    if (v.canPlayType("video/mp4") != "") { 
        changeSource(file + ".mp4"); 
    } 
    else if (v.canPlayType("video/webm") != "") { 
        changeSource(file + ".webm"); 
    } 
    return false; 


这个函数首先生成一个临时的视频元素,接着针对每一个支持的视频类型调用 canPlayType() 方法,在这个例子中视频类型为MP4和WebM。当确定了浏览器所能播放的文件类型后,它调用只有一个参数的changeSource(),这个被传入函数的文件名含有合适的文件扩展名。这个函数会返回 false 来防止element的链接变为 href 属性的值。

changeSource() 函数的定义如下:


function changeSource(src) { 
    resetPlayer(); 
    video.src = src; 
    video.load(); 


这个函数调用你下面将会看到的 resetPlayer() 函数,接着设置视频元素的 src 属性为:刚刚传入的被作为一个属性的新的视频文件。最后,它调用 load() 来加载新的视频源到 视频 元素中。

注意: 不是所有的浏览器都要求调用 load() 方法,但是Safari需要。因此,调用它是个好的主意。

resetPlayer() 函数为了准备载入一个新的视频,重置了一些播放器组件。


 
function resetPlayer() { 
    var playpause = document.getElementById("playpause"); 
    playpause.title = "play"; 
    playpause.innerHTML = "play"; 
    if (video.currentTime > 0) video.currentTime = 0; 
    updateProgress(); 


首先,它设置play/pause按钮的文本为 “play”。 接着如果 视频元素的currentTime 变量不在 0 的位置,则它重置为 0。最后它调用 updateProgress() 函数,它将重置进度条到开始的 位置(进度条使用了video 元素的 currentTime 属性,它只要设为0即可)。


下一步阅读方向

就是这样!你已经了解了创建一个简单的HTML5媒体播放器所需的所有必要步骤。虽然这个播放器的显示不是很有吸引力,但是你可以通过使用CSS样式来改进它的外观。

如果您想看更多的关于媒体元素API,它的事件和它在运行中的属性,请到 W3C’s HTML5 Video Events and API demonstration page。它演示的视频有着基本的控制,并显示API属性和事件。

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美