How to get an already existing MediaElementPlayer

Question

On my page, I've a MediaElementPlayer created for a <video> element using $('#video-id').medialementplayer(options). This element is hidden (using display: none) and turned into a modal dialog using jQuery UI.

I'm trying to bind the open/close event on this dialog to start/pause the palyer. The script handling the $(...).dialog(options) is separated from the script handling the $(...).medialementplayer(options) and don't have access to the created MediaElementPlayer.

If I was purely using HTML5 video element, I could retrieve the player using $('video', dialogContentElement).get(O), but since I'm using MediaElement.js I can't rely on this method to retrieve the actual player.

Does MediaElement.js provide a way to retrieve the existing MediaElementPlayer (or MediaElement) instance for a <video> or <audio> element? Or do I've to manage my own player registry?

score 2 · Answer 1 · answered Jan 18 '13 at 09:49

I cannot get the player to work the "new MediaElementPlayer" way (only the jQuery way works for me), so I devised this hack relying on the fact that the library adds players to the mejs.players array:

$('#my-video-id').
    mediaelementplayer(myopts).
    data('MEP',mejs.players[mejs.players.length-1]);

// ...

$('#my-video-id').data('MEP').play();

This works as long as you create the players one by one (each time on a jQuery object with exactly one element). Or you could risk something like this (untested):

var n = mejs.players.length;

$(myselector).mediaelementplayer(myopts).each(function(k,elt){

    $(elt).data('MEP',mejs.players[n+k]);
});

// ...

$('#my-video-id').data('MEP').pause();

Strangely I cannot get the mejs.players.length, it is returned as undefined. I am encountering the same problem that I found no way to get an instance of an already existed player. — analysiser, Jun 17 '13 at 23:08

score 2 · Answer 2 · answered Jan 14 '20 at 08:53

2

You can load the player using id of div with class mejs__container, and then load the player from msjs.players with the id of that div.

var id = $(".mejs__container").attr('id');
var me_player = mejs.players[id];
me_player.play();

answered Jan 14 '20 at 08:53

Sharique

4,199
6
36
54

score 1 · Answer 3 · answered Mar 10 '14 at 10:55

I've removed some other bits of code the samples below but this is essentially how we go about using mediaelements.js. It allows us control over the video player after it's been initialised.

This is what we do:

var videoPlayer;

$(function () {
    var whatever = $('#videoPlayer').mediaelementplayer({
        success: function (player, node) {
            videoPlayer = player;
        }
    });
});

Then later we programmatically set the video to play using essentially this:

var vidArray = [{ src: "/media/vid.mp4", type: 'video/mp4' }];
videoPlayer.setSrc(vidArray);
videoPlayer.play();

videoPlayer gives us access to the video player to play, pause, change etc.

HOWEVER, the bit that had us stumped was that it didn't work UNLESS the HTML markup had a source element. Without it we saw all kinds of weird errors. eg:

<video id="videoPlayer" width="100%" height="100%">
    <source src="/media/default.mp4" type="video/mp4" />
</video>

Using this as a base should give you full control over the video player.

Hope this helps.

score 0 · Answer 4 · edited May 09 '17 at 13:30

0

You can write it like the following code

var player = new MediaElementPlayer('#player');

player.pause();

player.play();

edited May 09 '17 at 13:30

Mayank

1,351
5
23
42

answered May 09 '17 at 07:46

user7445178

11
4

score 0 · Answer 5 · edited May 23 '17 at 12:02

In addition to the straight JQuery function to initialize MediaElement, you can init ME as a var, allowing you to use the API later on.

var player = new MediaElementPlayer('video',
   {defaultVideoWidth:960, defaultVideoHeight:410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'],
    success: function (mediaElement, domObject) { ... }
   });

// then bind the modal window's open and close callback function to the API:
// code below from the JQuery UI documentation at **http://docs.jquery.com/UI/Dialog**

$( ".selector" ).dialog({
    open: function(event, ui) { player.play(); },
    close: function (event, ui) { player.pause(); }
});

Since the .dialog(options) script is separated from the MediaElement script, you should make sure that var player is a global, or is appropriately passed into the function surrounding the .dialog() init.

This answer is based on a post from Matt Bergsma.

How to get an already existing MediaElementPlayer

5 Answers5