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

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

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

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

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

开始

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

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

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

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

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

接下来，准备继续前进！

添加播放和暂停功能

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

1. <div id="controls"> 
2. <button id="playpause" title="play">Play</button> 
3. </div> 

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

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

1. function togglePlayPause() { 
2.     var playpause = document.getElementById("playpause"); 
3.     if (video.paused || video.ended) { 
4.         playpause.title = "pause"; 
5.         playpause.innerHTML = "pause"; 
6.         video.play(); 
7.     } else { 
8.         playpause.title = "play"; 
9.         playpause.innerHTML = "play"; 
10.         video.pause(); 
11.     } 
12. } 

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

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

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

1. 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的滑动条：

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

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

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

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

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

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

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

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

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

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

1. function toggleMute() {  
2.     video.muted = !video.muted;  
3. } 

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

添加播放进度条

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

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

1. <div id="progressBar"> 
2.     <span id="progress"></span> 
3. </div> 

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

1. #progressBar {  
2.   border:1px solid #aaa; color:#fff;  
3.   width:295px; height:20px;  
4. } 
5. #progress {  
6.   background-color:#ff0000; 
7.   // red height:20px;  
8.   display:inline-block;  
9. } 

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

1. function updateProgress() { 
2.     var progress = document.getElementById("progress");  
3.     var value = 0;  
4.     if (video.currentTime > 0) {  
5.         value = Math.floor((100 / video.duration) * video.currentTime);  
6.     } 
7.     progress.style.width = value + "%"; 
8. } 

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

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

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

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

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

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

监听事件

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

Table 1. 媒体元素 API 事件

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

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

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

1. video.addEventListener('play', function() { 
2. var playpause = document.getElementById("playpause"); 
3. playpause.title = "pause"; 
4. playpause.innerHTML = "pause"; 
5. }, false); 
6.  
7. video.addEventListener('pause', function() { 
8. var playpause = document.getElementById("playpause"); 
9. playpause.title = "play"; 
10. playpause.innerHTML = "play"; 
11. }, false); 

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

1. video.addEventListener('ended', function() {  
2. this.pause(); 
3. }, false); 

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

添加播放列表

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

1. <ul id="playlist"> 
2.   <li><a href="#" onclick="playlistClick('grass-in-the-wind-sma');">Grass blowing in the wind</a></li> 
3.   <li><a href="#" onclick="playlistClick('tree-in-the-wind-sma');">Trees blowing in the wind</a></li> 
4. </ul> 

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

1. function playlistClick(file) { 
2.     var v = document.createElement("video"); 
3.     if (v.canPlayType("video/mp4") != "") { 
4.         changeSource(file + ".mp4"); 
5.     } 
6.     else if (v.canPlayType("video/webm") != "") { 
7.         changeSource(file + ".webm"); 
8.     } 
9.     return false; 
10. } 

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

changeSource() 函数的定义如下：

1. function changeSource(src) { 
2.     resetPlayer(); 
3.     video.src = src; 
4.     video.load(); 
5. } 

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

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

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

1. function resetPlayer() { 
2.     var playpause = document.getElementById("playpause"); 
3.     playpause.title = "play"; 
4.     playpause.innerHTML = "play"; 
5.     if (video.currentTime > 0) video.currentTime = 0; 
6.     updateProgress(); 
7. } 

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

下一步阅读方向

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索元素调用
， 视频
， video
， 函数
， video标签
， 属性
， 元素
， 暂停界面 按钮监听
， 视频进度条
， 监听浏览器标签关闭
， 视频api
， Meidia Play控件
， 控制播放进度
一个
，以便于您获取更多的相关知识。