首页 > 代码库 > JavaScript自定义媒体播放器
JavaScript自定义媒体播放器
使用<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 = "http://www.mamicode.com/Pause";13 } 14 else {15 player.pause();16 oBtn.value = "http://www.mamicode.com/Play";17 }18 }19 //定时更新当前时间20 setInterval(function(){21 curtime.innerHTML = player.currentTime;22 }, 250);23 }
以上JavaScript 代码给按钮添加了一个事件处理程序，单击它能让视频在暂停时播放，在播放时暂
停。通过<video>元素的load 事件处理程序，设置了加载完视频后显示播放时间。最后，设置了一个
计时器，以更新当前显示的时间。你可以进一步扩展这个视频播放器，监听更多事件，利用更多属性。
而同样的代码也可以用于<audio>元素，以创建自定义的音频播放器。
JavaScript自定义媒体播放器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。