使MediaElement与HTML5视频相同

如图所示：

只需将“媒体”添加到实例中，即可访问MediaElement属性，然后可以获得此处描述的api:

---

但是我如何使“媒体”不再必要，使MediaElement api与html5视频完全（几乎）相同？

您可以访问api

方法（作为html5视频），但不能访问
属性
或
事件
，在成功加载MEJS之后，仍然需要引用底层媒体元素

注意setter
属性
可以通过底层媒体元素（在
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);
 

请参见


编辑

OP评论道：

... 我能用一个“元素”引用所有这些元素和属性吗
有趣。回顾我编写的另一个代码，我认为可以声明，让我们称之为
通用元素
，您可以从代码中的任何位置对其应用任何
方法
、
属性
或
事件

您只需将
一个
元素声明为全局元素：

var uElement; // the universal element

然后使用
success
设置设置该值以覆盖底层媒体元素，如：

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

从那里，您现在可以将任何
方法
、
属性
或
事件
仅应用于单个
ueelement
对象。因此，使用前面的示例：

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);
 

请参见分叉

重要

在上面的例子中，我们使用了
音频
，然而
视频
是其他类型的动物

首先，您需要记住，您可能无法引用
UEElement
对象，除非视频已完全加载并且准备好播放。在视频准备就绪之前，对
UEElement
应用方法（如
.play（）
）可能会导致js错误和故障

例如，在前面的示例中，如果我们在MEJS初始化之后调用
uElement.play（）
方法（用于视频），它将触发js错误
uElement
is
undefined
。这是因为该方法是在
success
设置中的
ueelement
初始化之前调用的

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

添加一个
事件
侦听器（在
成功
设置中），当视频准备好播放时通知我们：

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

如果视频已准备好播放，则我们将
true
设置为我们的标志（以前初始化为
false
）

验证
\u 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）视频

请参见上一篇

最后一点：如果您有多个视频，并且希望对每个视频应用不同的
方法
、
属性
或
事件
，然后，您必须单独初始化它们，并为它们中的每一个创建一个不同的
UEElement
是否有任何方法来设置它，以便“myPlayer”的行为方式与典型的html5实例相同？也许我们可以在success函数中进行某种重定向？@hermanningjaldson：我（稍后）将编辑我的答案，以获得一种方法。感谢非常有用的讨论。我在这里询问了外部事件检测：