使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器，如下面的例子所示。
<div> <div> <video src="https://www.jb51.net/movie.mov" poster="mymovie.jpg"> Video player not available. </video> </div> <div> <input type="button" value="Play"> <span>0</span>/<span>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>元素，以创建自定义的音频播放器。