HTML 5多媒体组件（自定义控件使用）

注意： 之所以在这里调用 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样式来改进它的外观。