Как кодировать полноэкранный видеоплеер HTML5 с несколькими видео в цикле?

Question

Я хочу закодировать видеоплеер HTML5 без каких-либо элементов управления. Просто запустите автоматическое воспроизведение и зациклите несколько видео из каталога "мой веб-сайт / медиа" в полноэкранном режиме.

Тег, включающий "цикл автозапуска" и немного CSS, чтобы получить видео в полноэкранном режиме, работает нормально, но я не могу воспроизвести более одного видео.

Можно ли добавить больше видео без использования каких-либо элементов управления или видимых списков воспроизведения? Просто воспроизводить все видео из моего каталога автоматически в цикле?

<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>

Answer 1

В элементе есть событие "конец", который вы можете прослушать.Вы можете сделать что-то подобное, чтобы заменить src новым видео после окончания первого.

    // listener function changes src
    function myNewSrc() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = "http://mysite/myMovie2.m4v";
        myVideo.load();
        myVideo.play();
    }
    // add a listener function to the ended event
    function myAddListener(){
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.addEventListener('ended', myNewSrc, false);
    }