JavaScript自訂媒體播放器

標籤：height   put   class   事件   onclick   計時器   cli   sed   定義   

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

 1 <div class="mediaplayer"> 2     <div class="video"> 3         <video id="player" src="movie.mov" poster="mymovie.jpg" 4         width="300" height="200"> 5         Video player not available. 6         </video> 7     </div> 8     <div class="controls"> 9         <input type="button" value="Play" id="video-btn">10         <span id="curtime">0</span>/<span id="duration">0</span>11     </div>12 </div>

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

 1 window.onload=function(){ 2     var player = document.getElementById("player"), 3     oBtn = document.getElementById("video-btn"), 4     curtime = document.getElementById("curtime"), 5     duration = document.getElementById("duration"); 6     //更新播放時間 7     duration.innerHTML = player.duration; 8      9     oBtn.onclick = function(){10         if (player.paused){11             player.play();12             oBtn.value = "Pause";13         } 14         else {15             player.pause();16             oBtn.value = "Play";17         }18     }19     //定時更新目前時間20     setInterval(function(){21         curtime.innerHTML = player.currentTime;22     }, 250);23 }

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

JavaScript自訂媒體播放器