html - 使 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 评论:

... 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对于他们每个人