如何使用动态dom数组从许多视频中自动播放视频？

Question

如何使用动态dom阵列使许多视频自动播放视频？

目前，我仍在手动使用html video元素，而不是javascript数组。

var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');

function imgTransition(){
    imagen1.style.opacity=0;
    video1.play();
    video1.style.opacity=1;
}
video1.onended = function(){
    video2.play();
    video1.style.opacity=0;
    video2.style.opacity=1;
}
video2.onended = function(){
    video3.play();
    video2.style.opacity=0;
    video3.style.opacity=1;
}
video3.onended = function(){
    video3.style.opacity=0;
    imagen1.style.opacity=1;
    window.setTimeout(imgTransition, 5000);
}

*{padding:0;margin:0}video{width:100%;height:100%;position:absolute;object-fit:cover;transition:all 1.2s linear;z-index:-10}.video1{opacity:1}.video2{opacity:0}.video3{opacity:0}.imagenes{opacity:0;transition:opacity 2s;width:100%;height:100%;position:absolute;object-fit:cover;z-index:-10}.container{width:100%;height:100%}

<div class="container">
    <video autoplay  id="video1" class="video1">
        <source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
    </video>
    <video   id="video2" class="video2">
        <source src="https://hunzaboy.github.io/Ckin-Video-Player/ckin.mp4" type="video/mp4">
    </video>
    <video   id="video3" class="video3">
        <source src="https://www.cssscript.com/demo/vanilla-js-custom-html5-video-player-pureplayer/360.mp4" type="video/mp4">
    </video>
    <img src="transition.gif" class="imagenes" id="imagen1">
</div>

如何使用动态dom阵列使许多视频自动播放视频？

如何动态化功能：video.onended = function(){..}吗？

Answer 1

尝试在JavaScript中使用此代码

var source = 'http://thenewcode.com/assets/videos/ocean-small,http://thenewcode.com/assets/videos/ocean-small';
var arr = source.split(',');
var total = arr.length;
for (var i = 0; i < total; i++) {

    var video = document.createElement("video");
    var script = document.createElement("script");
    video.id = 'video'+i;
    video.setAttribute("controls", "controls");
    video.setAttribute("style", 'opacity:0;);
    if(i==0){
    video.setAttribute("autoplay", 'autoplay');
    video.setAttribute("style", 'opacity:1;);
    }
    video.innerHTML = '<source src="'+arr[i]+'.mp4" type="video/mp4">';

    var num = i+1;
    var last = i-1;

    if(i==total-1){
    script.innerHTML += "document.getElementById('video"+i+"').onended = function(){document.getElementById('video"+i+"').style.opacity=0;document.getElementById('imagen1').style.opacity=1;window.setTimeout(imgTransition, 2000);}";
    }else{
    script.innerHTML += "document.getElementById('video"+i+"').onended = function(){document.getElementById('video"+num+"').play();document.getElementById('video"+i+"').style.opacity=0;document.getElementById('video"+num+"').style.opacity=1;}";
    }

    document.getElementById('container').appendChild(video);
    document.body.appendChild(script);
};

function imgTransition(){
    document.getElementById('imagen1').style.opacity=0;
    document.getElementById('video0').play();
    document.getElementById('video0').style.opacity=1;
}