使MediaElement与HTML5视频相同

您可以访问API methods（作为HTML5视频），但不能访问properties或events，而在MEJS成功加载之后，仍然需要引用基础媒体元素。

请注意，可以通过基础媒体元素（在设置内）或MEJS播放器访问setter 。propertiessuccess

因此，以说明一下：

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

编辑

ON评论：

...我能以某种方式让所有这些元素和属性由一个“元素”引用

有趣。查看另一个代码我写的，我认为这将是可以声明，我们把它称为universal element，您可以向其中任何申请method，property或者event，在你的代码的任何地方。

您唯一需要做的就是将one元素声明为global：

var uElement; // the universal element

然后使用设置值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，除非视频已完全加载并且可以播放，否则您可能无法引用该对象。在视频准备就绪之前，将方法（如.play()）应用于uElement可能会引发js错误和故障。

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

如果我们要在视频（）加载后自动播放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为他们每个人