javascript Vimeo控制视频

Posted 2021-05-03

import Player from "@vimeo/player";
import {
  $sel,
  $all,
  backUntil,
  nextUntil,
  addClass,
  hasClass,
  removeClass,
  encode,
} from "./_helpers";

const videoContainerParentSelector = ".video-container";
const videoContainerSelector = ".title-content.video";
const videoPlayIconSelector = ".timeline-content-vids-line:not(.quizzes) .action-content > i";

function getIdVideos(selector) {
    const videos = [];
    $all(selector)
      .forEach((video, index) => {
        videos[index] = parseVideo(video.dataset.video)
          .id;
      });
    return videos;
  }

function getPlayer() {
    const firstVideo = getAllVideos()[0].dataset.video;
    const video = $sel(videoContainerParentSelector)
      .childNodes[0];
    let iframe;

    if (video) {
      iframe = video.tagName === "IFRAME" ?
        video :
        $sel(videoContainerParentSelector)
        .childNodes[1];
    }

    if (iframe) {
      if (iframe.src.includes('vimeo')) {
        return new Player(iframe);
      } else {
        iframe.src = firstVideo;
        return new Player(iframe);
      }
    } else {
      return new Player($sel(videoContainerParentSelector), { url: firstVideo });
    }
  }
  
function getAllVideos(selector = videoContainerSelector) {
    return Array.from($all(selector));
  }
  
function automaticReproduction(player, selector, videos) {
    player.off("play");
    player.off("ended");
    if (!selector.checked) {
      player.on("ended", async function (data) {
        let idVideo = await player.getVideoId()
          .then(id => {
            return id;
          });

        markVideoRead(idVideo, videoContainerSelector);

        let indice = videos.indexOf(idVideo.toString());
        if (videos[indice + 1] === videos[videos.lenght]) {
          return;
        }
        player.loadVideo(videos[indice + 1])
          .then(function (id) {
            player.play();
          });
      });
    } else {
      player.on("ended", function () {
        player.pause();
      });
    }
  }

function playVideo(target) {
    $all(videoPlayIconSelector)
      .forEach((play, index) => {
        if (index === 0)
          getPlayer()
          .loadVideo(getIdVideos(videoContainerSelector)[0]);

        play.addEventListener("click", function (e) {
          const url = backUntil(e.target, ".action-content")
            .previousElementSibling;
          const videos = getIdVideos(videoContainerSelector);
          const player = getPlayer();
          player.loadVideo(videos[index])
            .then(function (id) {
              player.play();
            });

          player.on("ended", async function (data) {
            let idVideo = await player.getVideoId()
              .then(id => {
                return id;
              });
            markVideoRead(idVideo, videoContainerSelector);
          });
        });
      });
  }