JavaScript实现自定义媒体播放器方法介绍
使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器，如下面的例子所示。
<divclass="mediaplayer"> <divclass="video"> <videoid="player"src="movie.mov"poster="mymovie.jpg" width="300"height="200"> Videoplayernotavailable. </video> </div> <divclass="controls"> <inputtype="button"value="Play"id="video-btn"> <spanid="curtime">0</span>/<spanid="duration">0</span> </div> </div>
以上基本的HTML再加上一些JavaScript就可以变成一个简单的视频播放器。以下就是JavaScript代码。
window.onload=function(){
varplayer=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>元素，以创建自定义的音频播放器。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！