JS自定义播放器

复制代码
  <div class="mediaplayer">
      <div class="video">
          <video id="player" src="movie.mov" poster="mymovie.jpg"
          width="300" height="200">
          Video player not available.
          </video>
      </div>
      <div class="controls">
          <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);
 }