欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年01月03日 09:33:17   作者：依然仰望  
本文主要介紹了JavaScript自定義媒體播放器的實(shí)現(xiàn)過程與方法，具有一定的參考作用，下面跟著小編一起來看下吧

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

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

相關(guān)文章

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

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

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

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

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

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

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

    window.returnValue使用方法示例介紹

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

    javascript顯示用戶停留時(shí)間的簡單實(shí)例

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

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

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

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

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

    深入分析javascript中console命令

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

    js 彈出菜單/窗口效果

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

    JS 正則表達(dá)式驗(yàn)證密碼、郵箱格式的實(shí)例代碼

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

最新評論