JavaScript自定义媒体播放器

Posted 2020-08-26

使用<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 = "Pause";
13         } 
14         else {
15             player.pause();
16             oBtn.value = "Play";
17         }
18     }
19     //定时更新当前时间
20     setInterval(function(){
21         curtime.innerHTML = player.currentTime;
22     }, 250);
23 }

以上JavaScript 代码给按钮添加了一个事件处理程序，单击它能让视频在暂停时播放，在播放时暂
停。通过<video>元素的load 事件处理程序，设置了加载完视频后显示播放时间。最后，设置了一个
计时器，以更新当前显示的时间。你可以进一步扩展这个视频播放器，监听更多事件，利用更多属性。
而同样的代码也可以用于<audio>元素，以创建自定义的音频播放器。