MediaElement.js Change source of video onclick

Question

In the MediaElement.js I am trying to make a "multi" video player. More or less I am going to have thumbnails change out the source of the video based on what one the user clicks on.

I have successfully done it for the HTML5 source using

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

BUT this only works for the HTML5 player and not the Flash fall back. I am using the basic video tag and letting mediaelement.js do the fallback work. I thought that changing the source like the example above would work but it does not.

I want the video to stop and switch to the next one when the next image is selected and vice versa with the Flash player fallback.

Is there an easy way to do this. I have not seen too much documentation on how to dynamically switch out videos with the Mediaelement.js stuff.

Any suggestions would be greatly appreciated.

Answer 1

If you are using the player with the API, you can use the "setSrc" method.

Example:

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

// ... sometime later

player.setSrc('urlToVid.mov');
player.play();
</script>

Answer 2

You can't just change the source of the video file. You have to remove the mejs div, create a new html5 video, and then call mediaelement on it again. By repeating this process, you're having it generate a new flash fallback with each video, as necessary.

Answer 3

it worked for me to load the media object after the src had been changed .. like so:

var player = new MediaElementPlayer('#vid'/*, Options */);        

$('#the_url').on('keypress',function(e){    
    if (e.which == 13) {
        player.pause();
        player.setSrc($('#the_url').val());        
        player.media.load();
    }
});

Answer 4

Old post - figured I'd add my resolution

Note: calling load() will also auto-play the video. This code also assumes that your input has a value already in there, and it is a child of the anchor tag that was clicked.

$('#idThatSwitches').click(function (e) {
    // get youTubeId
    var youTubeId = $(this).find('input[type="hidden"]').val();

    // switch out player's video source and reload
    var player = $('#idOfYourPlayer')[0].player.media;
    player.setSrc('http://youtube.com/watch?v=' + youTubeId);
    player.load();
});

Answer 5

Since this has taken a lot of time for me to figure out, I'll post what I've found here. I used the MediaElementJS Wordpress plug-in. To change the source, you can get a reference to the media element player like this:

$('#wp_mep_1')[0].player.media

The reason for doing this is because in WordPress the plug-in doesn't give you a variable to call functions like .load() or .play() on. So, I finally figured out that was how you can get a reference to the player inserted by the plug-in.

So to change the src:

var player = $('#wp_mep_1')[0].player.media;
if(player.setSrc)
    player.setSrc('xyz.mp4');

Answer 6

I'll take my turn at resurrecting an old question as well.

I'm not sure if something has changed in the MediaElement plugin, but none of the above solution worked for me 100%, some worked partially and some didn't work at all. A couple of the issues I faced were I could only load video into an element if there was not already a previous video loaded and playing, this was no good for me as it was meant to be used as a playlist selector. The other issue was for whatever reason the video would not load all the way and just stop a few seconds in.

The below however is working for me as of Oct '15.

<a href="http://www.youtube.com/watch?v=VIDEO-ID" onclick="
  playerObject.pause();
  playerObject.setSrc(this.href);
  playerObject.media.load();
  playerObject.load();
  return false
">
<img src="yourimg">
</a>

I like to use A tage to help me with formatting clickable objects like this, also preserves open in new window/tab functions.