亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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 事件處理程序，設(shè)置了加載完視頻后顯示播放時間。最后，設(shè)置了一個計時器，以更新當前顯示的時間。你可以進一步擴展這個視頻播放器，監(jiān)聽更多事件，利用更多屬性。而同樣的代碼也可以用于<audio>元素，以創(chuàng)建自定義的音頻播放器。

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

相關(guān)文章

  • js檢查頁面上有無重復(fù)id的實現(xiàn)代碼

    js檢查頁面上有無重復(fù)id的實現(xiàn)代碼

    有時候我們需要檢查一個頁面上是否用重復(fù)的id，一般id都是唯一的，也方便控制，那么就可以參考下面的代碼
    2013-07-07
  • 利用JavaScript阻止表單提交的兩種方法

    利用JavaScript阻止表單提交的兩種方法

    本文介紹怎樣利用JavaScript來阻止表單提交的兩種方法，分別是return false和使用preventDefault()，有需要的可以參考借鑒，下面一起來看看。
    2016-08-08
  • 網(wǎng)站404頁面3秒后跳到首頁的實例代碼

    網(wǎng)站404頁面3秒后跳到首頁的實例代碼

    我們看到很多網(wǎng)站會有有錯誤404頁面，當頁面不存存時就會提示，然后過幾秒就會自動跳到首頁了，下面我來給大家舉一個404錯誤頁面跳到首頁實例，各位可參考，有需要的朋友可以參考一下
    2013-08-08
  • window.returnValue使用方法示例介紹

    window.returnValue使用方法示例介紹

    returnValue是javascript中html的window對象的屬性,目的是返回窗口值，下面有個示例，大家可以感受下
    2014-07-07
  • javascript顯示用戶停留時間的簡單實例

    javascript顯示用戶停留時間的簡單實例

    這篇文章介紹了javascript顯示用戶停留時間的簡單實例，有需要的朋友可以參考一下
    2013-08-08
  • three.js中3D視野的縮放實現(xiàn)代碼

    three.js中3D視野的縮放實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了three.js中3D視野的縮放實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • JS中call apply bind函數(shù)手寫實現(xiàn)demo

    JS中call apply bind函數(shù)手寫實現(xiàn)demo

    這篇文章主要為大家介紹了JS中call apply bind函數(shù)手寫實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-03-03
  • 深入分析javascript中console命令

    深入分析javascript中console命令

    console對象是JavaScript的原生對象，它有點像Unix系統(tǒng)的標準輸出stdout和標準錯誤stderr，可以輸出各種信息用來調(diào)試程序，而且還提供了很多額外的方法，供開發(fā)者調(diào)用。它的常見用途有兩個。顯示網(wǎng)頁代碼運行時的錯誤信息。提供了一個命令行接口，用來與網(wǎng)頁代碼互動。
    2016-08-08
  • js 彈出菜單/窗口效果

    js 彈出菜單/窗口效果

    想象一下，你把一個重要內(nèi)容放在一個彈出窗口，又不聚集到這個窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當他們 tab 到這頁面結(jié)束，還繼續(xù) tab，才可能找到這個彈窗
    2011-10-10
  • JS 正則表達式驗證密碼、郵箱格式的實例代碼

    JS 正則表達式驗證密碼、郵箱格式的實例代碼

    這篇文章主要介紹了JS 正則表達式驗證密碼、郵箱格式的實例代碼,需要的朋友可以參考下
    2018-10-10

最新評論