Воспроизвести следующее видео по окончании текущего видео (через Vimeo API) - PullRequest
Новая
       90

Воспроизвести следующее видео по окончании текущего видео (через Vimeo API)

0 голосов
/ 01 мая 2020

Я пытаюсь создать видео героя, в котором я могу добавить несколько коротких клипов (через Vimeo), так как воспроизведение одного видео заканчивается, а затем начинается следующее - бесконечно l oop.

Идея Если у первого видео есть активный класс, затем спрячьте и покажите каждое видео по l oop.

Я могу достать до второго видео, но не могу понять, как его поддерживать бесконечно долго .

Это то, что у меня есть до сих пор ...

HTML

<div class="video-wrapper">
  <div class="vid active" data-queue="1" data-vimid="414028849" id="{video1}"></div>
  <div class="vid" data-queue="2" data-vimeoid="414029177" id="{video2}"></div>
  <div class="vid" data-queue="3" data-vimeoid="414029297" id="{video3}"></div>
  <div class="vid" data-queue="4" data-vimeoid="414028849" id="{video4}"></div>
  <div class="vid" data-queue="5" data-vimeoid="414029177" id="{video5}"></div>
</div>

Javascript

let videoCount = 1;
let activeVideo = document.querySelector(`[data-queue='${videoCount}']`);
let nextVideo = document.querySelector(`[data-queue='${videoCount + 1}']`);

const playerOptions = {
  id: activeVideo.dataset.vimeoid,
  autoplay: true,
  portrait: false,
  byline: false,
  badge: false,
  title: false,
  controls: false,
};
const player = new Vimeo.Player(`{video${videoCount}}`, playerOptions);

player.setVolume(0);

player.on("ended", function() {
  activeVideo.classList.remove("active");
  nextVideo.classList.add("active");

  videoCount = videoCount + 1;

  const playerOptions1 = {
    id: nextVideo.dataset.vimeoid,
    autoplay: true,
    portrait: false,
    byline: false,
    badge: false,
    title: false,
    controls: false,
  };
  const player = new Vimeo.Player(`{video${videoCount}}`, playerOptions1);
});
...