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