asked on

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

ASKER CERTIFIED SOLUTION

Imran Javed Zia

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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