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

paddy086Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Imran Javed ZiaConsultant Software Engineer - .NET ArchitectCommented:
Hi,

You can use onended event of video control for this purpose. When this event fires you may trigger next video.

You may find following article very helpful in general:
https://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx
http://www.sitepoint.com/essential-audio-and-video-events-for-html5/


Thanks and Regards

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
paddy086Author Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.