play multiple videos?

[aaronhb]

Can this plugin play multiple videos or a playlist of videos or is it limited to a single video?

[vodkabears]

No. Limited.

[nltesown]

Would you consider enhancing your plugin to enable the playback of an array of videos?

[Dobby89]

@aaronhb @nltesown The way I accomplished this was to create an array of the videos, so I could control all of them independently using the array index.

var videos = [];
videos[0] = $('.js-video-0').data('vide');
videos[1] = $('.js-video-1').data('vide');
videos[2] = $('.js-video-2').data('vide');

videos[0].getVideoObject().play();
videos[1].getVideoObject().pause();
videos[2].getVideoObject().play();

And the markup could be something like:

<div class="js-video-0" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"></div>
<div class="js-video-1" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"></div>
<div class="js-video-2" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"></div>

You could probably use a data-video-id="0" attribute instead of class="js-video-0" if you wanted though.

[juanma-eurek]

I've made a quick test like this and it's working:

playlist = ['video1', 'video2', 'video3'];

function playlistVideo () {
    $('#elem').vide({
        mp4: 'video/' + playlist[0] + '.mp4',
        webm: 'video/' + playlist[0] + '.webm',
        ogv: 'video/' + playlist[0] + '.ogv',
        poster: 'video/' + playlist[0] + '.jpg'
    }, {
        autoplay: true,
        loop: false
    });

    player1 = $('#elem').data('vide').getVideoObject();

    player1.onended = function () {
        playlist.shift();
        if (playlist.length) {
            playlistVideo();
        }
    }
}

[SrPeterr]

I've made a quick test like this and it's working:

playlist = ['video1', 'video2', 'video3'];

function playlistVideo () {
    $('#elem').vide({
        mp4: 'video/' + playlist[0] + '.mp4',
        webm: 'video/' + playlist[0] + '.webm',
        ogv: 'video/' + playlist[0] + '.ogv',
        poster: 'video/' + playlist[0] + '.jpg'
    }, {
        autoplay: true,
        loop: false
    });

    player1 = $('#elem').data('vide').getVideoObject();

    player1.onended = function () {
        playlist.shift();
        if (playlist.length) {
            playlistVideo();
        }
    }
}

Can you explain a bit more on how to do it? What to change on the index?