使 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，它们仍然需要引用底层的 media 元素，并且在成功加载 MEJS 之后.

注意 setter properties 可以通过引用底层 media 元素（在 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

然后使用 success 设置设置值以覆盖底层 media 元素，例如：

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 错误和故障。

例如，在我们之前的例子中，如果我们在MEJS初始化之后立即调用uElement.play()方法（用于视频），它会触发js错误uElement是undefined .这是因为该方法是在 success 设置内的 uElement 初始化之前调用的。

如果我们想在视频 (uElement.play()) 加载后自动播放（或者实际上调用应用于uElement 的任何其他方法），我们需要做两件事解决上述情况：

1. 添加一个event 监听器（在success 设置内），它会在视频准备好播放时通知我们：

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

   如果视频可以播放，那么我们将true 设置为我们的标志（之前初始化为false）

2. 验证setInterval() 函数中的_canPlay 标志直到是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