在“结束”上播放数组中的下一个视频

play next video in an array on "ended"

本文关键字：下一个 视频 数组 播放 结束      更新时间：2023-09-26

我有一个视频数组，当一个结束时，数组中的下一个应该播放。
我找到了这个脚本：

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

但是我在当前的脚本中实现它时遇到了问题，即，

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将返回一个元素数组，而不是一个。所以

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
}

阿拉伯数字。
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(

我使用多个文件输入修改了视频输入，以便用户可以选择文件。

https://jsfiddle.net/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(

相关文章：