使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒體文件的播放。組合使用屬性、事件和這兩個方法，很容易創建一個自定義的媒體播放器，如下面的例子所示。
<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代碼。
window.onload=function(){ var player = document.getElementById("player"), oBtn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration"); //更新播放時間 duration.innerHTML = player.duration; oBtn.onclick = function(){ if (player.paused){ player.play(); oBtn.value = "Pause"; } else { player.pause(); oBtn.value = "Play"; } } //定時更新當前時間 setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250);}以上JavaScript 代碼給按鈕添加了一個事件處理程序，單擊它能讓視頻在暫停時播放，在播放時暫停。通過<video>元素的load 事件處理程序，設置了加載完視頻后顯示播放時間。最后，設置了一個計時器，以更新當前顯示的時間。你可以進一步擴展這個視頻播放器，監聽更多事件，利用更多屬性。而同樣的代碼也可以用于<audio>元素，以創建自定義的音頻播放器。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
