Play all videos in the array

Posted 2 months ago by pickab00

I am trying to make a playlist from html video tag and here is what I have so far.

var nextVideo = ["public/playlist/1.mp4", "public/playlist/2.mp4", "public/playlist/3.mp4"]; var curVideo = 0; var videoPlayer = document.getElementById('videoPlayer');

    if (nextVideo.length <= 1) {
        videoPlayer.loop = true;
        //console.log('one video can not be played');
    }
    videoPlayer.onended = function(){
        if(curVideo == 0){

                videoPlayer.src = nextVideo[1];
                curVideo = 1;


        } else if(curVideo == 1){
            videoPlayer.src = nextVideo[0];
            curVideo = 0;
        }
    }

And the HTML

            <video style="width:860px; height:580px;" controls autoplay id="videoPlayer">
                <source src="public/playlist/1.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>

My problem is that after the main video <source> file has been played, it only loads the video 1 and 2 from the array of js. It does not play 1. What I want is to play all the videos in the array. And something wierd. I added:

if (nextVideo.length <= 1) {
        videoPlayer.loop = true;
        //console.log('one video can not be played');
    }

because if I have one video in <source> and if I have one video in the array, it plays only the <source> file and ends it there. How can I repeat the array even if it has only one video. And most importantly how can I play all the videos in the array and not skip any.

Thanks

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.