製作的MediaElement一樣HTML5視頻

Question

正如如下所示： How do I get mediaelement.js player state (paused, volume, etc.)?

，您可以訪問的MediaElement通過簡單地增加「媒體」的實例屬性，然後你可以在這裏描述的API：http://mediaelementjs.com/#api。

但是，我該如何做到這一點，使'媒體'不必要，使MediaElement api完全（幾乎）與html5視頻相同？

Answer 1

您可以訪問API methods（如HTML5視頻），但不properties或events，仍然需要參考的基本媒體元素，只是MEJS已成功加載後。

通知該設定器properties可以參照任一底層媒體元素（success設置內部）或MEJS播放器來訪問。

所以，來說明：

var myPlayer = new MediaElementPlayer('.player_1', { 
    success: function (mediaElement) { 
     // properties need to refer the MEJS underlaying element 
     console.log(mediaElement.paused); // return true 
     console.log(mediaElement.muted); // returns false 
     // same for events 
     mediaElement.addEventListener('playing', function() { 
      console.log("event triggered after play method"); 
     }, false); 
     mediaElement.addEventListener('pause', function() { 
      // set time at 90 seconds and unmute if player is paused 
      // but wait 3 seconds before doing that 
      // notice the previous time set (145 seconds) 
      setTimeout(function() { 
       // setters can refer MEJS underlaying element 
       mediaElement.setCurrentTime(90); 
       mediaElement.setMuted(false); 
      }, 3000); 
     }, false); 
    } 
}); 

// methods can refer the MEJS player 
myPlayer.play(); 

// but not properties 
console.log("paused? " + myPlayer.paused); // returns undefined 
console.log("muted? " + myPlayer.muted); // returns undefined 

// pauses, set time and mute after 5 seconds of playing 
setTimeout(function() { 
    myPlayer.pause(); // method 
    // setters can also refer the MEJS player 
    myPlayer.setCurrentTime(145); 
    myPlayer.setMuted(true); 
}, 5000); 
  

見JSFIDDLE

---

編輯

OP評論：

......可我莫名其妙具有所有這些元素和屬性由一個「元素」引用

有趣。回顧我寫的另一個代碼我認爲可以聲明，我們稱之爲universal element，您可以從代碼中的任何位置向其應用任何method,property或event。

你需要做的唯一的事情就是你的one元素來定義全球：

var uElement; // the universal element 

然後將該值設置withing的success設置覆蓋底層媒體元素，如：

success: function (mediaElement) { 
    uElement = mediaElement; 
    .... 
} 

從那裏，你現在可以申請任何method,property或event到那個單個uElement只有對象。因此，使用前面的例子：

var uElement; // the universal element 

var myPlayer = new MediaElementPlayer('.player_1', { 
    success: function (mediaElement) { 
     // set the universal element 
     uElement = mediaElement; 
     // properties for universal element 
     console.log(uElement.paused); // OK return true 
     console.log(uElement.muted); // OK returns false 
     // set events for universal element 
     uElement.addEventListener('playing', function() { 
      console.log("event triggered after play method"); 
     }, false); 
     uElement.addEventListener('pause', function() { 
      // set time at 90 seconds and unmute if player is paused 
      // but wait 3 seconds before doing that 
      // notice the previous time set (145 seconds) 
      setTimeout(function() { 
       // setters for universal element 
       uElement.setCurrentTime(90); // OK 
       uElement.setMuted(false); // OK 
      }, 3000); 
     }, false); 
    } 
}); 

// method for universal element 
uElement.play(); // OK 

// properties for universal element 
console.log("paused? " + uElement.paused); // OK returns false 
console.log("muted? " + uElement.muted); // OK returns false 

// pauses, set time and mute after 5 seconds of playing 
setTimeout(function() { 
    uElement.pause(); // OK method for universal element 
    // setters for universal element 
    uElement.setCurrentTime(145); // OK 
    uElement.setMuted(true); // OK 
}, 5000); 
  

見分叉JSFIDDLE

重要

在上面的例子中，我們使用audio，但是videos其他類型的動物。

首先，您需要記住，您可能無法參考uElement對象，除非視頻已完全加載並且已準備好播放。在視頻準備就緒之前對uElement應用方法（如.play()）可能會導致js錯誤和故障。

例如，在我們前面的例子，如果我們調用uElement.play()方法（視頻）剛剛MEJS初始化之後，它會觸發JS錯誤uElement是undefined。這是因爲該方法在success設置中的uElement初始化之前被調用。

如果我們想自動播放視頻（uElement.play()）它的加載後立即（或打電話應用於uElement作爲事實上任何其他方法），我們需要做兩件事情要解決上述情況：

1. 添加event監聽器（在success設置內），通知我們在視頻準備播放：

   uElement.addEventListener('canplay', function() { 
       _canPlay = true; 
   }, false); 
   

   如果視頻是準備比賽，那麼我們設置true到我們的旗幟（先前初始化爲false）

2. 驗證_canPlay國旗的setInterval()函數內，直​​到true，然後播放

   var readyToPlay = setInterval(function() { 
       console.log("not ready yet"); 
       if (_canPlay) { 
        console.log("Now it's ready, so play"); 
        uElement.play(); 
        clearInterval(readyToPlay); 
       }; 
   }, 100); 
   

此解決方法可用於youtube視頻以及自託管（mp4）視頻。

見最後JSFIDDLE

最後一個音符：如果你有幾部影片，並且希望不同的應用methods，properties或events他們每個人，那麼你必須單獨對其進行初始化，並創建一個不同的uElement爲他們每個人