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

时间：2014-09-14

这是关于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('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即可）。