Как я могу просмотреть несколько фоновых видео? - PullRequest
Новая
       8

Как я могу просмотреть несколько фоновых видео?

0 голосов
/ 26 января 2019

Я пытаюсь создать страницу с тремя фоновыми видео, которые воспроизводятся одно за другим, когда страница загружается, затем возвращается к первому и снова запускается как автоматический цикл, но воспроизводится только первое видео.похож на этот сайт https://mediaboom.com/

<video class="video" autoplay muted loop>
                <source src="bar.mp4" type="video/mp4">
            </video>

            <video class="video"autoplay muted loop>
                <source src="baking.mp4" type="video/mp4">
            </video>

            <video class="video" autoplay muted loop>
                <source src="meat.mp4" type="video/mp4">
            </video>
        </div>

1 Ответ

0 голосов
/ 26 января 2019

Этого можно достичь, прослушивая событие «закончившееся» в определенном видео, а когда это происходит, вызовите метод «воспроизведения» для следующего видео в очереди.

Для этого:

  1. Сначала добавьте идентификатор к каждому видео в HTML, чтобы вы могли затем добавьте слушателей событий к ним. (В моем коде я добавил идентификаторы "video1", "video2", "video3".)
  2. Вызовите функцию (например, playVideo), когда видео «закончилось», передав идентификатор следующего видео для воспроизведения.

Примечание. Атрибут autoplay необходим только для первого видео. С этого момента мы будем вместо этого вызывать метод play.

JavaScript 

window.onload = function(){ 
    //now that the window has loaded we add our event listeners to the videos.
    //When video1 has ended, play video2 etc
    document.getElementById("video1").addEventListener("ended", function(){ playVideo("video2"); });
    document.getElementById("video2").addEventListener("ended", function(){ playVideo("video3"); });
    document.getElementById("video3").addEventListener("ended", function(){ playVideo("video1"); });
}

function playVideo(videoID){
    //This playVideo function takes in the ID of a video element and plays that video.
    var videoElement = document.getElementById(videoID);
    videoElement.play();
}

HTML 

<video id="video1" class="video" autoplay muted>
    <source src="bar.mp4" type="video/mp4">
</video>

<video id="video2" class="video" muted>
    <source src="baking.mp4" type="video/mp4">
</video>

<video id="video3" class="video" muted>
    <source src="meat.mp4" type="video/mp4">
</video>
...