这是关于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> 

接下来，准备继续前进！

添加播放和暂停功能