全国服务热线:4008-888-888

行业新闻

点餐微信小程序开发_JavaScript完成自界说媒体播放

JavaScript实现自定义媒体播放器方法介绍       本文主要介绍了JavaScript自定义媒体播放器的实现过程与方法,具有一定的参考作用,下面跟着小编一起来看下吧

使用 audio 和 video 元素的play()和pause()方法,可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的例子所示。

 div 
 div 
 video id="player" src="movie.mov" poster="mymovie.jpg"
 width="300" height="200" 
 Video player not available.
 /video 
 /div 
 div 
 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 元素,以创建自定义的音频播放器。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服