Question

我正在尝试制作包含照片和视频的幻灯片，当它到达视频幻灯片时，我希望它停止播放视频并等待其结束。然后继续进行下一张幻灯片。

为解决这个问题，我尝试在html5中的video元素的函数play（）上使用promiss，就像这里的示例一样。

但是，被许可人内部的代码无法执行，并且警报上会显示未定义的消息。

有人可以帮助我吗？

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Ricardo Ambrosio</title>
  </head>
  <body>
    <div class="top-nav">
      <ul>
        <li><a class="active" href="#perfil">QUEM SOU EU?</a></li>
        <li><a href="#programa">COMO FUNCIONA?</a></li>
        <li><a href="#alunos">MEUS ALUNOS</a></li>
        <li><a href="#planos">PLANOS E PREÇOS</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#presencial">ATENDIMENTO PRESENCIAL</a></li>
        <li><a href="#blog">BLOG</a></li>
      </ul>
    </div>

    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="img1">
          <img src="/images/banner-1.jpg" />
        </div>
      </div>
    </div>

    <div class="slideshow-container">
      <div class="mySlides fade">
        <img src="/images/banner-2.jpg" />
      </div>
    </div>

    <div class="slideshow-container">
      <div class="mySlides fade">
        <img src="/images/banner-3.jpg" />
      </div>
    </div>

    <div class="slideshow-container">
      <div class="mySlides fade">
        <video id="video" width="1550" height="500">
          <source src="/videos/443474440.mp4" type="video/mp4" />
        </video>
      </div>
    </div>

    <button class="w3 button w3-display-left next" onclick="plusSlides(1)">
      &#10095;
    </button>
    <button class="w3 button w3-display-left prev" onclick="plusSlides(-1)">
      &#10094;
    </button>
    <script src="index.js"></script>
  </body>
</html>

index.js

let video = document.getElementById("video");

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

video.addEventListener("ended", function() {
  setTimeout(showSlides, 1000);
});

video.addEventListener("click", function() {
  if (video.paused) {
    video.play();
    video.volume = 1;
  } else {
    video.pause();
    video.volume = 0;
  }
});

async function playPause() {
  video.play();
  video.volume = 0;
}

async function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (slideIndex == 4) {
    playPause();
  } else {
    setTimeout(showSlides, 2000);
  }
}

等待视频播放完毕，再转到幻灯片的下一张幻灯片吗？

0 个答案: