how to display multiple videos one by one dynamically in loop using HTML5 and javascript

html, javascript

Solution

Let me show mine :D

<html>
<head>
    <title>Subway Maps</title>

    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
    <video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
    <script>
        var video_list      = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
                                "Experience Conrad Hotels & Resorts.mp4",
                                "Mount Airy Casino Resort- Summer TV Ad 2.mp4"
                            ];
        var video_index     = 0;
        var video_player    = null;

        function onload(){
            console.log("body loaded");
            video_player        = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }

        function onVideoEnded(){
            console.log("video ended");
            if(video_index < video_list.length - 1){
                video_index++;
            }
            else{
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }
    </script>
</body>

Problem

am trying to display multiple videos one by one using html5 and java script.. but its not coming.. i used the below code ``` <html> <head> <title>video example</title> </head> <script> video_count =1; videoPlayer = document.getElementById("ss"); video=document.getElementById("myVideo"); function run(){ video_count++; //alert(video_count); if (video_count == 4) video_count = 1; var nextVideo = "video/video"+video_count+".mp4"; //videoPlayer.src = nextVideo; alert(nextVideo); videoPlayer.setAttribute("src", nextVideo[video_count]); videoPlayer.play(); } videoPlayer.onended(function(e) { if (!e) { e = window.event; } run(); }; </script> <body onload="run();"> <video id="myVideo" height="400" width="400" autoplay> <source id="ss" src="video/video1.mp4" type='video/mp4'> </video> </body> </html> ``` currently code is displaying only first video and it will stop...

Original source

Related problems