Как заставить видео воспроизводиться автоматически из многих видео с использованием динамических массивов dom? - PullRequest
Новая
       12

Как заставить видео воспроизводиться автоматически из многих видео с использованием динамических массивов dom?

0 голосов
/ 01 октября 2019

Как заставить видео воспроизводиться автоматически из многих видео с использованием динамических массивов dom?

В настоящее время я по-прежнему использую элемент видео html вручную вместо массива 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(){..}

...