mediaelement.js - play another video at end of 1st video

Question

Referred by Kroc @ Video for Everyone. I'd like to be able to automatically play a second video after first one ends, and then display a static image after the second one ends. After a set period of time, loop back to the first video.

Thanks

Answer 1

$(function(){
        $('audio,video').mediaelementplayer({
            success: function(player, node) {
                player.addEventListener('ended', function(e){
                    player.src = 'media/somefile.mp4';
                    player.load();
                    player.play();
                });
            }
        });
    });

That should do it.

Answer 2

to change src of video you have to use setSrc API method. otherwise is wouldn't work for flash in browsers which don't support html5 (e.g. Firefox)

one more important thing - look at this issue - Chrome / Safari, setSrc -> play. it should be some timeout to show video properly in Chrome.

Unfortunately "player" not always works, so it's better to user "media" object.

So the code should be something like the following:

       $('video').mediaelementplayer({
            pluginPath: "/YourPlaginPath/",
            success: function (media, node, player) {
                media.addEventListener('ended', function (e) {

                    setTimeout(function () {
                        media.setSrc('somevideo.mp4');
                        media.load();
                        media.play();
                    }, 500);

                }, false);
            }
        });