CODEWITHSUNDEEP
mediaelement.js
Pierre Buyle
Pierre Buyle

Reputation: 4873

How to get an already existing MediaElementPlayer

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?

Upvotes: 3

Views: 6792

Answers (5)

Sharique
Sharique

Reputation: 4219

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

Upvotes: 2

user7445178
user7445178

Reputation: 11

You can write it like the following code

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

player.pause();

player.play();

Upvotes: 0

Jag
Jag

Reputation: 753

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.

Upvotes: 1

Lucas Balzer
Lucas Balzer

Reputation: 316

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.

Upvotes: 0

Szczepan Hołyszewski
Szczepan Hołyszewski

Reputation: 3167

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

Upvotes: 2

Related Questions