Question

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

您只需添加＆＃39;媒体＆＃39;即可访问MediaElement属性。到实例然后你可以得到这里描述的api：http://mediaelementjs.com/#api。

但我如何才能使媒体＆＃39;没有必要，使MediaElement api完全（几乎）与html5视频相同？

Answer 1

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

注意可以参考基础媒体元素（properties设置内部）访问 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);

参见 JSFIDDLE

修改

OP评论道：

...我可以以某种方式将所有这些元素和属性引用一个元素＆＃39;

有趣。回顾我写的另一个代码我认为可以声明，让我们称之为 universal element ，你可以应用任何method，{{1来自代码中的任何位置。}或property。

您唯一需要做的就是将 event 元素声明为全局：

one

然后使用var uElement; // the universal element设置设置值以覆盖基础 media 元素，如：

success

从那里，您现在可以将success: function (mediaElement) { uElement = mediaElement; .... }，method或property仅应用于该单个 event 对象。所以使用前面的例子：

uElement

请参阅分叉 JSFIDDLE

重要

在上面的示例中，我们使用了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); ，但audio是其他类型的动物。

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

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

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

添加uElement.play()监听器（在uElement设置内），告知我们视频何时可以播放：

event

如果视频已准备好播放，我们会将success设置为我们的标记（之前已初始化为uElement.addEventListener('canplay', function () { _canPlay = true; }, false);）

验证true函数中的false标记，直到_canPlay为止，然后播放

setInterval()

此解决方法可用于youtube视频以及自托管（mp4）视频。

参见上一页 JSFIDDLE

上次发送：如果您有多个视频，并且想要对每个视频应用不同的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);或methods，那么您必须单独初始化它们并为每个
创建不同的properties

使MediaElement与HTML5视频相同

1 个答案: