Question

Here’s the scenario:

I have a page that contains a video element which is set up with a video. The source of this video may be HTML5 video with multiple sources (and Flash fallback) or a YouTube video.
Beneath this is a number of images which serve as video thumbnails, clicking on one should load the appropriate video, by destroying the existing MediaElementPlayer and creating a new one on the same video element.

This creates the initial player on page load:

$('video').mediaelementplayer({ alwaysShowControls: true });

And this is intended to change the player when one of the images is clicked:

$('video').mediaelementplayer({
   alwaysShowControls: true,
   success: function(media, dom, player) {
      console.log('success!');
   },
   error: function() {
      console.log('error!');
   }
});

But it doesn’t work. The success function is never entered (neither is error) and nothing appears to happen.

I guess the library still thinks that the original player exists or something, and have tried a number of things to try and tell it that this isn’t the case, for example:

mejs.meIndex = 0
mejs.players = []

To no effect, and setting:

window.mejs = null;
window.MediaElementPlayer = null;
window.MediaElement = null;

Just breaks things 🙂

Can anyone out there help? I’m sure I’m missing something simple here so I’d be very grateful if someone could point out what! Thanks in advance.

Answer 1

I’m going to answer my own question here for anyone else who might have the same issue and stumble across this entry.

It turns out that what I want to do is not supported my MediaElementJS at the time of writing this.

My solution was to create two players and use one for HTML5/Flash videos and the other for YouTube videos, showing and hiding the appropriate one as required.