HTML5多媒体组件的使用——第三部分：自定义控件
创建日期
7 November 2011
要求
必备知识
熟悉 HTML 和 JavaScript。
用户级别
中级
此篇教程详细的描述了构建一个自定义媒体播放器的各个步骤，添加一些特点和功能，使用不同的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 |
当返回 |
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('tree-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属性和事件。
你可以在我的书（HTML5 Multimedia: Develop and Design）里读到更多的关于为HTML5视频和音频创建自定义控制的方法。