Click here to Skip to main content
15,178,422 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?
alok0000 14-Dec-14 7:09am
   
Chrome and firefox.. I have check both

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);
    }
}
   
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>
Thomas Daniels 14-Dec-14 13:05pm
   
If you want to play multiple videos at the same time, you need two video elements.

Or do you mean that you just want to play multiple videos, without playing them at the same time? In that case, can you please give some more explanation on what you are trying to do?
alok0000 14-Dec-14 13:37pm
   
I have to load another videos once first video ended. First video should play till one day and the next day another video should load for that day.
Thomas Daniels 14-Dec-14 13:45pm
   
Do you want to do what you said in your other question?
alok0000 14-Dec-14 14:24pm
   
yes
Thomas Daniels 14-Dec-14 15:02pm
   
I'm sorry, but I don't really have a solution for that. I have tried to find something, but my attempt didn't work.
alok0000 14-Dec-14 23:47pm
   
ok Thank you for Trying.

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