在&"end&"上以阵列播放下一个视频 [英] play next video in an array on "ended"

问题描述

我有一组视频，当一个结束时，应播放阵列中的下一个视频.
我找到了这个脚本:

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);

因此，有两个问题:

1. 他们在干扰吗?第一个完全不更改视频.
2. 如何将它们组合起来，以便下一个视频是数组中的下一个视频?

推荐答案

1.
document.getElementsByTagName 将返回一个元素数组，而不是一个.所以

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

应该是:

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

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

2.
结束结束后播放另一个视频，

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);

实时演示:: http://jsfiddle.net/DerekL/qeLcD/(替换为带有文本而不是viedos的数组)

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

这篇关于在&"end&"上以阵列播放下一个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！