Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 485
rshan Avatar asked Jun 07 '11 18:06

rshan


2 Answers

$(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.

like image 130
producerism Avatar answered Oct 27 '22 18:10

producerism


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);
            }
        });
like image 31
Dmitry Khryukin Avatar answered Oct 27 '22 18:10

Dmitry Khryukin