HTML5多媒體組件的使用——第三部分：自定義控件

這是關於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> 

 

接下來，准備繼續前進！

 

添加播放和暫停功能