html - 使 MediaElement 与 HTML5 视频相同

Question

如图所示: How do I get mediaelement.js player state (paused, volume, etc.)?

您只需将“media”添加到实例即可访问 MediaElement 属性，然后您可以获得此处描述的 api:http://mediaelementjs.com/#api .

但是我如何才能使“媒体”不再是必需的，使 MediaElement api 与 html5 视频的 API 完全相同(几乎)相同？

Answer 1

您可以访问API methods (作为 HTML5 视频)但不是 properties或events ，它仍然需要引用底层的 media 元素，并且在 MEJS 成功加载之后。

注意setterproperties可以引用底层 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评论:

... could I somehow have all those elements and properties refer up by one 'element'

有趣。回顾我编写的另一段代码，我认为可以声明，我们称其为 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);
 

参见 fork 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对于他们每个人