Alex Rivera | Logout

MediaElement.js Change source of video onclick

Asked 2011-04-14T17:34:30.533
14

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.

mediaelement.js
Edit
Report

2 Answers

20

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>
answered 2011-06-02T22:07:25.277
3

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.

answered 2011-05-06T01:59:02.890

Your Answer