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>