Make MediaElement the same as HTML5 video

Question

As shown here: How to get the status of playerelement.js (paused, volumes, etc.)?

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

But how can I do this so that “media” is not necessary by making the MediaElement api exactly (almost) the same as in the html5 video?

Answer 1

You can access API methods (like HTML5 video), but not properties or events , which should still reference the underlying media element immediately after MEJS has been successfully loaded.

Pay attention to the installation properties that can be accessed either by the basic multimedia element (inside the success parameter) or by the MEJS player.

So, to illustrate:

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

See JSFIDDLE

---

EDIT

OP commented:

... Can I somehow have all these elements and properties referring to one "element"

Interesting. After looking at the other code that I wrote, I think that one could declare, let him name the universal element to which you can apply any method , property or event , from anywhere in your code.

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

 var uElement; // the universal element 

Then set the value with the success parameter to override the basic media element, for example:

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

Now you can apply any method , property or event only to this single uElement object. Therefore, 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); 

See forked JSFIDDLE

IMPORTANT

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

First, you need to keep in mind that you cannot reference the uElement object if the video has not been fully downloaded and is ready to play . Applying a method (e.g. .play() ) to uElement until the video is ready can cause js error and malfunction.

For example, in our previous example, if we call the uElement.play() method (for video) immediately after initializing MEJS, it causes the js uElement is undefined error. This is because the method was called before initializing uElement inside the success parameter.

If we want to autoplay the video ( uElement.play() ) immediately after downloading it (or call any other method applied to uElement in essence), we need to do 2 things to circumvent the situation described above:

• add an event listener (inside the success parameter) that tells us when the video is ready to play:

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

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

• check the _canPlay flag inside the setInterval() function until true , then play

   var readyToPlay = setInterval(function () { console.log("not ready yet"); if ( _canPlay ) { console.log("Now it ready, so play"); uElement.play(); clearInterval(readyToPlay); }; }, 100); 

This workaround can be used for youtube videos, as well as for independent video (mp4).

See the latest JSFIDDLE

LAST NOTICE . If you have several videos, and you want to apply different methods , properties or events to each of them, you must initialize them individually and create different uElement for each of them