Solved: play multiple videos in a loop using HTML5 and JavaScript

Create Account

JavaScript

Questions

Followers

Top Experts

paddy086🇮🇪

play multiple videos in a loop using HTML5 and JavaScript

Hi
I have been looking for a simple way of playing multiple videos in one video tag.
I have found a java script that is ment to work from http://www.mindfiresolutions.com/How-to-play-multiple-videos-in-a-loop-using-HTML5-and-JavaScript-1799.php

I also have a second script that dose the same but only plays the first video

Q1. The script only plays the first video the second video dose not play.

Q2. Is there any way to add more videos to the script lets say 4 videos in total.

Q3. If one of the videos is missing from the VIDEO folder would the script just move on to the next video or will it just stop working.

I know I asked 3 question and I am happy to start with only Question 1 thanks for any help given.....

Script as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>

  <video controls autoplay loop id="myVideo" >

	</video>

<script type="text/javascript">
        var videoSource = new Array();

videoSource[0]='video/video1.mp4';

videoSource[1]='video/video1.mp4';

var videoCount = videoSource.length;
    document.getElementById("myVideo").setAttribute("src",videoSource[0]); 

    function videoPlay(videoNum)
    {
document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
    }

       document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
       } 
	   </script>

 


</body>
</html>

Open in new window

Second Different script

<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.play();

       }

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

Open in new window

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

ASKER CERTIFIED SOLUTION

Imran Javed Zia🇵🇰

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

paddy086🇮🇪

ASKER

Hello Imran Javed Zia Thanks for your reply.
I Have been looking at your links could you help a little more with the scripts

thanks

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

JavaScript

Questions

Followers

Top Experts

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.