Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I found this code to Play a array of videos back to back but i am facing a issue
where i am wrong pls help

XML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var videoSource = new Array();
        videoSource[0] = 'videos/1.mp4';
        videoSource[1] = 'videos/2.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>


</head>
<body>
         <video controls="controls" id="myVideo" >

   </video>
</body>
</html>
Posted
Comments
Chubby Ninja 14-Dec-14 5:52am    
If you open up your dev tools console do you get any errors when the vid attempts to loop? Your js looks good at first glance
alok0000 14-Dec-14 5:54am    
Hi Chubby Ninja. Not getting any error in JS. but video does not even resume and play next on end.
Afzaal Ahmad Zeeshan 14-Dec-14 7:29am    
You should post a reply to their comment, in order to notify them.
alok0000 14-Dec-14 6:32am    
Please check the live solution. http://jsbin.com/kepetewoce/1/edit?html,js,output.. help me out where i am a wrong
Kornfeld Eliyahu Peter 14-Dec-14 6:50am    
What browser?

1 solution

There are a few problems:

a) Your JavaScript runs before any of the elements has been loaded. Either put your script at the end of your body tag, or wrap it in the window.onload event like this:
JavaScript
window.onload = function(e) {
    // your script here
}

b) The variable i is undefined.
c) The autoplay doesn't do anything and can be removed; you have to play the first video using JavaScript.
JavaScript
var videoSource = new Array();
videoSource[0] = 'http://devdoodle.net/a/beep.mp3';
videoSource[1] = 'http://devdoodle.net/a/beep.mp3';
var i = 0; // define i
var videoCount = videoSource.length;

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);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}
 
Share this answer
 
Comments
alok0000 14-Dec-14 7:40am    
Thank you so much ProgramFOX. It is not playing from the beginning VideoSource[0] to videosource[N]. It plays in reveres direction. I need to set videoPlay(2)
Thomas Daniels 14-Dec-14 8:06am    
You're welcome!

I assumed that you would start from video 0, hence I wrote videoPlay(0). That can be changed without any problem.
alok0000 14-Dec-14 11:56am    
Thank You ProgramFOX
Thomas Daniels 14-Dec-14 11:58am    
You're welcome!
alok0000 14-Dec-14 13:00pm    
Hi please find the below code. i have span id which displays multiple text. the same code i have to implement to play videos. i have to add the same in video's attribute src to play multiple videos. how could i achieve this?


<html>
<body>



<span id="myVid" />

<!-- <video controls autoplay="autoplay">

</video>-->

<script id="jsbin-javascript">
var videos = [
"dictionary/1.mp4",
"dictionary/2.mp4",

];
videoPlayer = document.getElementById("myVid");
function playArray(index,ele,array,listener){
//e.removeEventListener(listener?listener:0);
ele.innerHTML = array[index];
//e.load();
//le.play();

index++;
if(index>=array.length){
index=0;
}

setTimeout(function(){
playArray(index,ele,array,listener);
},2000);
}
playArray(0,document.getElementById("myVid"),videos);
</script>
</body>
</html>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900