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

Question

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

possible duplicate of [HTML5 video loop src change on end play function not working](http://stackoverflow.com/questions/17521012/html5-video-loop-src-change-on-end-play-function-not-working) — Christian, Jan 07 '14 at 06:44

score 11 · Answer 1 · answered Apr 28 '15 at 04:10

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>

It refresh the video element when video ends, how to eliminate that blip and play next video smoothly? — Aamir Nakhwa, May 04 '19 at 14:32

score 5 · Answer 2 · edited Nov 09 '22 at 22:32

5

<html>
<head>
<title>video example</title>
</head>

<body>
    <video id="myVideo" height="400" width="400" autoplay onended="run();">   
        <source id="ss"  src="video/video1.mp4" type='video/mp4'>
    </video>

    <script>
        video_count =1;
        videoPlayer = document.getElementById("ss");        
        video=document.getElementById("myVideo");

        function run(){
            video_count++;
            if (video_count == 4) video_count = 1;
            videoPlayer.setAttribute("src","video/video"+video_count+".mp4");       
            video.load();
            video.play();
            
       }

    </script>
</body>
</html>

Changes:

Placed the javascript code just before closing the body tag to ensure that the video object is loaded before the script is run.
video element already has an "onended" attribute so you can call the run function from there.
videoPlayer.setAttribute("src", nextVideo[video_count]); has an issue. nextVideo[video_count] implies that nextVideo is an array but is not . Its a string. So you can directly use nextVideo when setting the attribute.
videoPlayer = document.getElementById("ss"); gets the source element. You cannot call the play() function on that object, simply because that function isn't defined for it. So video.play() should work just fine.

Hope this solves your problem.

edited Nov 09 '22 at 22:32

Eduardo Molteni

38,786
23
141
206

answered Jan 07 '14 at 09:25

anurupr

2,294
2
20
28

am gettin these two error Denying load of chrome- extension://kdidombaedgpfiiedeimiebkmbilgmlc/css/jquery_ui/images/ui-bg_flat_75_ffffff_40x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. – meena Jan 07 '14 at 09:57
can any one tell me how to set time duration for each video in the above code? – meena Jan 10 '14 at 13:07
as we are accessing videos one by one from the folder video_count, if any one of the video is deleted in the folder.. how to skip that video and go to next one? can anyone suggest me in this part? – meena Jan 14 '14 at 12:34
2

For this to work i had to add video.load(); before video.play();. – This_is_me Jun 12 '14 at 08:41
@This_is_me only video.load(); is enough to load the next video and start playing it. – Sergio Santiago Jun 09 '15 at 21:13
For this to work you also need to add `muted="muted"` for ` – Prasad Patel Oct 26 '18 at 07:40
I'm getting this : script.js:14 Uncaught TypeError: videoPlayer.setAttribute is not a function – Ron16 Sep 14 '20 at 17:06

score 2 · Answer 3 · answered Jan 15 '19 at 18:39

2

before this function call video.play(); need add: video.load(); otherwise it will still display the previous video. So the code should be

video.load();

video.play();

answered Jan 15 '19 at 18:39

Jeff

21
2

score 0 · Answer 4 · answered Aug 19 '22 at 13:05

0

<video id="myVideo" height="400" width="400" autoplay onended="run();">

Add controls auto muted inside video tag.

<video id="myVideo" height="400" width="400" autoplay onended="run();" controls auto muted >

answered Aug 19 '22 at 13:05

RNG Research and Training Hub

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '22 at 00:12

score -1 · Answer 5 · answered Oct 12 '17 at 09:16

-1

It's working fine. Thanks for you!

Little bit modified code I have attached below, I hope this is helpful for who searching the video plays continuously with entire screen,

enter image description here

answered Oct 12 '17 at 09:16

Sundara Moorthi

1

2

Please do not put images of code, instead paste the code directly in the editor and format it as code. Help on formatting https://stackoverflow.com/editing-help – Xpleria Oct 12 '17 at 09:21
This was not a reply, it was a comment, which should have been placed under any reply you want to thank. – DavidTaubmann Nov 15 '17 at 14:55

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

5 Answers5

Linked