Отключить видеоэлементы во время воспроизведения другого видео на странице - PullRequest
Новая
       34

Отключить видеоэлементы во время воспроизведения другого видео на странице

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

Я работал над опросом, в котором было 14 коротких анимаций. После просмотра короткой анимации вы можете ответить на вопрос о ней, оценив рейтинг клипа от 0 до 5. Радиоэлементы отключены до тех пор, пока вы не посмотрите клип, но теперь я также хочу отключить другие видеоэлементы во время воспроизведения одного клипа. А именно потому, что в противном случае вы можете просто перемещать мышь по экрану, и видео будут воспроизводиться и включаться после того, как вы их «просмотрели», даже если вы действительно не обращали на них внимания. Я вижу похожие вопросы на форуме, но они касаются остановки другого видео, когда вы нажимаете кнопку воспроизведения, это не то, чего я хочу.

Мой код: 

window.addEventListener('load', function() {
    var videoElements = document.getElementsByClassName("videos");
    var radioElements = document.querySelectorAll(".answer-item.radio-item input[type=radio]");

    // Disable alle radio elementen.
    for (let radioElement of radioElements) {
      // radio elements can't be clicked
      radioElement.setAttribute("disabled", "disabled");
    }

    // Add listeners voor alle video elementen.
     for (let videoElement of videoElements) {
          // On mouseover start the video.
      videoElement.addEventListener('mouseover', (event) => {
        var video = event.currentTarget;
        video.play();
        if (event.currentTarget.currentTime < 1){
            videoElements.setAttribute("disabled","disabled")
        }
      });

      // While playing, check if timestamp >  0.8, if so, enable the inputs.
      videoElement.addEventListener('timeupdate', (event) => {
        if (event.currentTarget.currentTime > 0.8) {
          // Zoek de index (hoeveelste video) van deze video.
          let index = Array.from(videoElements).indexOf(event.currentTarget);

          if (index !== -1) {
            // Zoek de 5 matchende radio elementen.
            let startIndex = index == 0 ? 0 : index * 5;
            let endIndex = startIndex + 5;
            let fiveRadioElements = Array.from(radioElements).slice(startIndex, endIndex);

            // Enable the 5 radio elements that belong to this video.
            for (let radioElement of fiveRadioElements) {
              radioElement.removeAttribute("disabled");
            }
          }
        }
      })
    }
});

Заранее спасибо!

1 Ответ

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

Это было исправлено благодаря моим хорошим HappyLinks. Для заинтересованных: 

window.addEventListener('load', function() {
    var videoElements = document.getElementsByClassName("videos");
    var radioElements = document.querySelectorAll(".answer-item.radio-item input[type=radio]");

    // Disable alle radio elementen.
    for (let radioElement of radioElements) {
      // radio elements can't be clicked
      radioElement.setAttribute("disabled", "disabled");
    }

    // Add listeners voor alle video elementen. --> this is in comments because we want the clip to continue playing at mouseout
    var isVideoPlaying = false;
    for (let videoElement of videoElements) {
      // On mouseover start the video.
      videoElement.addEventListener('mouseover', (event) => {
        var video = event.currentTarget;
        if (!isVideoPlaying) {
          video.play();
          isVideoPlaying = true;
        }
      });

      // While playing, check if timestamp > 0.8, if so, enable the inputs.
      videoElement.addEventListener('timeupdate', (event) => {
        if (event.currentTarget.currentTime > 0.8) {
          // Zoek de index (hoeveelste video) van deze video.
          let index = Array.from(videoElements).indexOf(event.currentTarget);

          if (index !== -1) {
            // Zoek de 5 matchende radio elementen.
            let startIndex = index == 0 ? 0 : index * 5;
            let endIndex = startIndex + 5;
            let fiveRadioElements = Array.from(radioElements).slice(startIndex, endIndex);

            // Enable the 5 radio elements that belong to this video.
            for (let radioElement of fiveRadioElements) {
              radioElement.removeAttribute("disabled");
            }

          }
        }
      });

      videoElement.addEventListener('ended', (event) => {
        isVideoPlaying = false;
      });
    }
  });
...