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

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

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

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

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

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

<videoid="video"controls>
<sourcesrc=http://www.shancun.net/skin/default/image/nopic.gif style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" class="alt"><sourcesrc=http://www.shancun.net/skin/default/image/nopic.gif style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"></video>

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

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

<script>
//Grabahandletothevideovarvideo=document.getElementById("video");
//Turnoffthedefaultcontrolsvideo.controls=false;
</script>

接下来，准备继续前进！

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

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

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

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

functiontogglePlayPause(){
varplaypause=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事件中：

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

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

varplaypause=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的滑动条：

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

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

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

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

functionsetVolume(){
varvolume=document.getElementById("volume");
video.volume=volume.value;}

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

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

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

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

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

functiontoggleMute(){
video.muted=!video.muted;
}

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

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

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

<divid="progressBar">
<spanid="progress"></span>
</div>

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

#progressBar{
border:1pxsolid#aaa;color:#fff;
width:295px;height:20px;
}
#progress{
background-color:#ff0000;
//redheight:20px;
display:inline-block;
}

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

functionupdateProgress(){
varprogress=document.getElementById("progress");
varvalue=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的CSSwidth。

在上面的播放，暂停，静音等时，你可以使用如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(){
  varplaypause=document.getElementById("playpause");
  playpause.title="pause";
  playpause.innerHTML="pause";
},false);
video.addEventListener('pause',function(){
  varplaypause=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的侦听器里面，或者，如果你有其他的需求或扩展，你在这里定义它。

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

<ulid="playlist">
<li><ahref="#"onclick="playlistClick('grass-in-the-wind-sma');">Grassblowinginthewind</a></li>
<li><ahref="#"onclick="playlistClick('tree-in-the-wind-sma');">Treesblowinginthewind</a></li>
</ul>

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

functionplaylistClick(file){
varv=document.createElement("video");
if(v.canPlayType("video/mp4")!=""){
changeSource(file+".mp4");
}
elseif(v.canPlayType("video/webm")!=""){
changeSource(file+".webm");
}
returnfalse;
}

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

changeSource()函数的定义如下：

functionchangeSource(src){
resetPlayer();
video.src=src;
video.load();
}

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

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

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

functionresetPlayer(){
varplaypause=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属性和事件。