使MediaElement与HTML5视频相同 [英] Make MediaElement same as HTML5 video

问题描述

如下所示：
如何获得mediaelement.js播放器状态（已暂停，音量等）？

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

you can access MediaElement attributes by simply adding 'media' to the instance and then you can get the api described here:http://mediaelementjs.com/#api.

但是如何制作它以便媒体不必要，使MediaElement api与html5视频完全相同（几乎） ？

But how do I make it so that the 'media' wont be necessary, making the MediaElement api exactly(almost) the same as that of the html5 video?

推荐答案

您可以访问API 方法（作为HTML5视频）但是不是属性或事件，它们仍然需要引用基础 media 元素而且只是MEJS成功加载后。

You can access API methods (as HTML5 video) but not properties or events, which still need to refer to the underlying media element and just after MEJS has been successfully loaded.

注意可以参考 setter 属性基础媒体元素（在成功设置内）或MEJS播放器。

Notice that setter properties can be accessed referring either the underlying media element (inside the success setting) or the MEJS player.

所以说明：

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

See JSFIDDLE

EDIT

OP评论：

...我可以以某种方式让所有这些元素和属性引用一个'元素'

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

有趣。回顾我写的另一个代码我认为可以声明，让我们称之为 通用元素 ，你可以应用任何方法，属性或事件，来自代码中的任何位置。

Interesting. Reviewing another code I wrote I think it would be possible to declare, let's call it an universal element, to which you can apply any method, property or event, from anywhere in your code.

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

The only thing you would need to do is to declare your one element as global :

var uElement; // the universal element

然后使用成功设置值设置覆盖基础 media 元素，如：

Then set the value withing the success setting to override the underlying media element like :

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

从那里，您现在可以申请任何该单个的方法，属性或事件 uElement 仅限对象。所以使用前面的例子：

From there, you could now apply any method, property or event to that single uElement object only. So using the previous example :

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

参见forked JSFIDDLE

See forked JSFIDDLE

重要

在上面的示例中，我们使用 audio ，但 videos 是其他类型的动物。

In the example above we used audio, however videos are other type of animal.

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

First, you need to bear in mind that you may not able to refer to the uElement object, unless the video has been completely loaded AND is ready to play. Applying a method (like .play() ) to the uElement before the video is ready may trow a js error and malfunction.

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

For instance, in our previous example, if we call the uElement.play() method (for videos) just right after the MEJS initialization, it will trigger the js error uElement is undefined. This is because the method was called before the uElement initialization inside the success setting.

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

If we want to autoplay the video (uElement.play()) just after it's loaded (or call any other method applied to the uElement as a matter of fact) we need to do 2 things to workaround the situation described above:

1. 添加事件监听器（在成功设置）通知我们视频何时可以播放：

1. add an event listener (inside the success setting) that informs us when the video is ready to play:

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

如果视频已准备好播放，那么我们设置 true 到我们的旗帜（之前初始化为 false ）

if the video is ready to play, then we set true to our flag (previously initialized as false)

验证 _canPlay 在 setInterval（）函数内的标志，直到 true ，然后播放

validate the _canPlay flag inside a setInterval() function until is true, then play

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）视频。

This workaround can be used for youtube videos as well as self-hosted (mp4) videos.

参见上一页 JSFIDDLE

See last JSFIDDLE

最后注意：如果您有多个视频并且想要应用不同的<每个code>方法，属性或事件，然后你必须单独初始化它们并为每个人创建一个不同的 uElement

LAST NOTE : if you have several videos and you want to apply different methods, properties or events to each of them, then you have to initialize them individually and create a different uElement for each of them

这篇关于使MediaElement与HTML5视频相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！