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

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

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

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

<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 就可以變成一個(gè)簡(jiǎn)單的視頻播放器。以下就是JavaScript代碼。

window.onload=function(){
  var player = document.getElementById("player"),
  oBtn = document.getElementById("video-btn"),
  curtime = document.getElementById("curtime"),
  duration = document.getElementById("duration");
  //更新播放時(shí)間
  duration.innerHTML = player.duration;
  oBtn.onclick = function(){
    if (player.paused){
      player.play();
      oBtn.value = "Pause";
    } 
    else {
      player.pause();
      oBtn.value = "Play";
    }
  }
  //定時(shí)更新當(dāng)前時(shí)間
  setInterval(function(){
    curtime.innerHTML = player.currentTime;
  }, 250);
}

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: