[隨手記]h5播放器屬性和自定義播放器

版權說明：

本文整理轉載自

《Professional JavaScript for Web Developers, 3rd Ed》（《JavaScript高級程序設計（第3版）》）

以備參閱和交流，如有侵權，請聯繫博主刪除

郵箱： [email protected]

正文

屬性

<video>和<audio>元素都提供了完善的 JavaScript 接口。下表列出了這兩個元素共有的屬性，通
過這些屬性可以知道媒體的當前狀態。

屬 性 數據類型 說 明
autoplay 布爾值 取得或設置autoplay標誌
buffered 時間範圍 表示已下載的緩衝的時間範圍的對象
bufferedBytes 字節範圍 表示已下載的緩衝的字節範圍的對象
bufferingRate 整數 下載過程中每秒鐘平均接收到的位數
bufferingThrottled 布爾值 表示瀏覽器是否對緩衝進行了節流
controls 布爾值 取得或設置controls屬性，用於顯示或隱藏瀏覽器內置的控件
currentLoop 整數 媒體文件已經循環的次數
currentSrc 字符串 當前播放的媒體文件的URL 
currentTime 浮點數 已經播放的秒數
defaultPlaybackRate 浮點數 取得或設置默認的播放速度。默認值爲1.0秒
duration 浮點數 媒體的總播放時間（秒數）
ended 布爾值 表示媒體文件是否播放完成
loop 布爾值 取得或設置媒體文件在播放完成後是否再從頭開始播放
muted 布爾值 取得或設置媒體文件是否靜音
networkState 整數 表示當前媒體的網絡連接狀態：0表示空，1表示正在加載，2表示
正在加載元數據，3表示已經加載了第一幀，4表示加載完成
paused 布爾值 表示播放器是否暫停
playbackRate 浮點數 取得或設置當前的播放速度。用戶可以改變這個值，讓媒體播放速
度變快或變慢，這與defaultPlaybackRate只能由開發人員修改
的defaultPlaybackRate不同
played 時間範圍 到目前爲止已經播放的時間範圍
readyState 整數 表示媒體是否已經就緒（可以播放了）。0表示數據不可用，1表示
可以顯示當前幀，2表示可以開始播放，3表示媒體可以從頭到尾播放
seekable 時間範圍 可以搜索的時間範圍
seeking 布爾值 表示播放器是否正移動到媒體文件中的新位置
src 字符串 媒體文件的來源。任何時候都可以重寫這個屬性
start 浮點數 取得或設置媒體文件中開始播放的位置，以秒錶示
totalBytes 整數 當前資源所需的總字節數
videoHeight 整數 返回視頻（不一定是元素）的高度。只適用於<video> 
videoWidth 整數 返回視頻（不一定是元素）的寬度。只適用於<video> 
volume 浮點數 取得或設置當前音量，值爲0.0到1.0 

其中很多屬性也可以直接在和元素中設置。

事件

除了大量屬性之外，這兩個媒體元素還可以觸發很多事件。這些事件監控着不同的屬性的變化，這
些變化可能是媒體播放的結果，也可能是用戶操作播放器的結果。下表列出了媒體元素相關的事件。

事 件 觸發時機
abort 下載中斷
canplay 可以播放時；readyState值爲2 
canplaythrough 播放可繼續，而且應該不會中斷；readyState值爲3 
canshowcurrentframe 當前幀已經下載完成；readyState值爲1 
dataunavailable 因爲沒有數據而不能播放；readyState值爲0 
durationchange duration屬性的值改變
emptied 網絡連接關閉
empty 發生錯誤阻止了媒體下載
ended 媒體已播放到末尾，播放停止
error 下載期間發生網絡錯誤
load 所有媒體已加載完成。這個事件可能會被廢棄，建議使用canplaythrough
loadeddata 媒體的第一幀已加載完成
loadedmetadata 媒體的元數據已加載完成
loadstart 下載已開始
pause 播放已暫停
play 媒體已接收到指令開始播放
playing 媒體已實際開始播放
progress 正在下載
ratechange 播放媒體的速度改變
seeked 搜索結束
seeking 正移動到新位置
stalled 瀏覽器嘗試下載，但未接收到數據
timeupdate currentTime被以不合理或意外的方式更新
volumechange volume屬性值或muted屬性值已改變
waiting 播放暫停，等待下載更多數據

這些事件之所以如此具體，就是爲了讓開發人員只使用少量 HTML 和 JavaScript（與創建 Flash 影
片相比）即可編寫出自定義的音頻/視頻播放器。

自定義媒體播放器

使用和元素的 play()和 pause()方法，可以手工控制媒體文件的播放。組合使
用屬性、事件和這兩個方法，很容易創建一個自定義的媒體播放器，如下面的例子所示。

16.3 媒體元素 489 

    <div class="mediaplayer"> 
     <div class="video"> 
     <video id="player" src="movie.mov" poster="mymovie.jpg" 
     width="300" height="200"> 
     Video player not available. 
     </video> 
     </div> 
     <div class="controls"> 
     <input type="button" value="Play" id="video-btn"> 
     <span id="curtime">0</span>/<span id="duration">0</span> 
     </div> 
    </div> 

以上基本的 HTML 再加上一些 JavaScript 就可以變成一個簡單的視頻播放器。以下就是 JavaScript
代碼：

//取得元素的引用
var player = document.getElementById("player"), 
 btn = document.getElementById("video-btn"), 
 curtime = document.getElementById("curtime"), 
 duration = document.getElementById("duration"); 
//更新播放時間
duration.innerHTML = player.duration; 
//爲按鈕添加事件處理程序
EventUtil.addHandler(btn, "click", function(event){ 
 if (player.paused){ 
 player.play(); 
 btn.value = "Pause"; 
 } else { 
 player.pause(); 
 btn.value = "Play"; 
 } 
}); 

//定時更新當前時間
setInterval(function(){ 
 curtime.innerHTML = player.currentTime; 
}, 250); 

以上 JavaScript 代碼給按鈕添加了一個事件處理程序，單擊它能讓視頻在暫停時播放，在播放時暫
停。通過元素的 load 事件處理程序，設置了加載完視頻後顯示播放時間。最後，設置了一個
計時器，以更新當前顯示的時間。你可以進一步擴展這個視頻播放器，監聽更多事件，利用更多屬性。
而同樣的代碼也可以用於元素，以創建自定義的音頻播放器。