I have an array of videos, and when one ends, the next in the array should play.
I've found this script:

function myNewSrc() {
    var myVideo = document.getElementsByTagName("video")[0];
    myVideo.src =
        ".jpg";
    myVideo.load();
    myVideo.play();
}
function myAddListener(){
    var myVideo = document.getElementsByTagName("video")[0];
    myVideo.addEventListener('ended',myNewSrc,false);
}

but I'm having trouble implementing it in my current script, which is,

var numb = $(this).index(),
    videos = [
        "images/talking1.m4v",
        "images/talking2.m4v",
        "images/talking1.m4v",
        "images/talking2.m4v",
        "images/talking1.m4v",
        "images/talking2.m4v"
    ],
    myVideo = document.getElementById("myVid");
    myVideo.src = videos[numb];
    myVideo.load();
    setTimeout(function(){
        myVideo.play();
    }, 200);

So, two questions:

1. Are they interfering? The first one doesn't change the video at all.
2. How can I bine these so that the next video called is the next in the array?

I have an array of videos, and when one ends, the next in the array should play.
I've found this script:

function myNewSrc() {
    var myVideo = document.getElementsByTagName("video")[0];
    myVideo.src =
        "http://cheerioscoupons.info/wp-content/uploads/_Cheerios-Coupons-1-300x283.jpg";
    myVideo.load();
    myVideo.play();
}
function myAddListener(){
    var myVideo = document.getElementsByTagName("video")[0];
    myVideo.addEventListener('ended',myNewSrc,false);
}

but I'm having trouble implementing it in my current script, which is,

var numb = $(this).index(),
    videos = [
        "images/talking1.m4v",
        "images/talking2.m4v",
        "images/talking1.m4v",
        "images/talking2.m4v",
        "images/talking1.m4v",
        "images/talking2.m4v"
    ],
    myVideo = document.getElementById("myVid");
    myVideo.src = videos[numb];
    myVideo.load();
    setTimeout(function(){
        myVideo.play();
    }, 200);

So, two questions:

1. Are they interfering? The first one doesn't change the video at all.
2. How can I bine these so that the next video called is the next in the array?

• javascript
• jquery
• arrays
• ipad
• html

Share Improve this question Follow edited May 20, 2012 at 0:43 Nata2ha Mayan2 asked May 19, 2012 at 19:50 Nata2ha Mayan2Nata2ha Mayan2 48411 gold badge1010 silver badges2424 bronze badges 2

• 1 one problem, you redeclare the video array each call... – Cole Tobin Commented May 19, 2012 at 19:52
• One another problem: document.getElementsByTagName("video"); will return an array of elements, not one single DOM element. – Derek 朕會功夫 Commented May 19, 2012 at 20:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

1.
document.getElementsByTagName will return an array of elements, not one. So

var myVideo = document.getElementsByTagName("video");
myVideo.addEventListener('ended',myNewSrc,false);    //wrong

var myVideo = document.getElementsByTagName("video");
myVideo.load();   //wrong
myVideo.play();   //wrong

What it should be is:

myVideo[0].load()   //if there is only one

for(var i=0;i<myVideo.length;i++){
    myVideo[i].load();    //if there is more
}

2.
Play another video after ended,

var videos = [
    "images/talking1.m4v",
    "images/talking2.m4v",
];
function playArray(index,ele,array,listener){
    ele.removeEventListener(listener||0);
    ele.src = array[index];
    ele.load();
    ele.play();
    index++;
    if(index>=array.length){
        index=0;
    }
    listener = ele.addEventListener('ended',function(){
        playArray(index,ele,array,listener);
    },false);
}
playArray(0,document.getElementById("myVid"),videos);

LIVE DEMO: http://jsfiddle/DerekL/qeLcD/ (Replaced with an array with text instead of viedos)

I modified the videos input using multiple file input so that the user can select the files.

https://jsfiddle/geqd31pu/

<input id="file" type="file" multiple>    
<button onclick="play()">play</button>    
<video id="video" src="" autoplay controls></video>    
<script>
let index = 0
video = document.getElementsByTagName('video')[0]
play = () => {
  const files = document.getElementById('file').files
  const file = files[index++ % files.length]
  const url = window.URL.createObjectURL(file)
  video.src = url
  video.load()
}
video.addEventListener('ended', play, false)
</script>

play let index = 0 video = document.getElementsByTagName('video')[0] play = () => { const files = document.getElementById('file').files const file = files[index++ % files.length] const url = window.URL.createObjectURL(file) video.src = url video.load() } video.addEventListener('ended', play, false)