JavaScript實現(xiàn)自定義媒體播放器方法介紹

更新時間：2017年01月03日 09:33:17 作者：依然仰望

本文主要介紹了JavaScript自定義媒體播放器的實現(xiàn)過程與方法，具有一定的參考作用，下面跟著小編一起來看下吧

使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒體文件的播放。組合使用屬性、事件和這兩個方法，很容易創(chuàng)建一個自定義的媒體播放器，如下面的例子所示。

<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);
}

以上JavaScript 代碼給按鈕添加了一個事件處理程序，單擊它能讓視頻在暫停時播放，在播放時暫停。通過<video>元素的load 事件處理程序，設置了加載完視頻后顯示播放時間。最后，設置了一個計時器，以更新當前顯示的時間。你可以進一步擴展這個視頻播放器，監(jiān)聽更多事件，利用更多屬性。而同樣的代碼也可以用于<audio>元素，以創(chuàng)建自定義的音頻播放器。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: