Question

我的网站上有多个幻灯片放映，这非常适合我的图片，但是对于视频，我有一个问题，当在每个幻灯片放映中选择它们时，我无法播放它们（并停止其他未选择的视频））。可以将这种功能集成到现有结构中吗？

var slideIndex = [1];
var slideId = ["mySlides1"];
showDivs(1, 0);


function currentSlide(n, no) {
  showDivs(slideIndex[no] = n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {
    slideIndex[no] = 1;
  }
  if (n < 1) {
    slideIndex[no] = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no] - 1].style.display = "block";
}

<div class="slidercontainer slidergrid wow" id="0">
  <video class="picturesize_slideshow mySlides1" autoplay loop muted playsinline src="video01.mp4" type="video/mp4"></video>
  <video class="picturesize_slideshow mySlides1"  loop muted playsinline src="video02.mp4" type="video/mp4"></video>
  <video class="picturesize_slideshow mySlides1" loop muted playsinline src="video03.mp4" type="video/mp4"></video>
  <video class="picturesize_slideshow mySlides1" loop muted playsinline src="video04.mp4" type="video/mp4"></video>
  <video class="picturesize_slideshow mySlides1"  loop muted playsinline src="video05.mp4" type="video/mp4"></video>
  <video class="picturesize_slideshow mySlides1"  loop muted playsinline src="video06.mp4" type="video/mp4"></video>
  <div class="slidetext_under_left">
    <h3>Title</h3>
    <p>Text</p>
  </div>
  <div class="slidebuttons_right" id="2">
    <button class="button1 active" onclick="currentSlide(1,0)">Create</button>
    <button class="button1" onclick="currentSlide(2,0)">NLP</button>
    <button class="button1" onclick="currentSlide(3,0)">Drag'n Drop</button>
    <button class="button1" onclick="currentSlide(4,0)">Group</button>
    <button class="button1" onclick="currentSlide(5,0)">Unite</button>
    <button class="button1" onclick="currentSlide(6,0)">Plan</button>
  </div>
</div>

如何在Slidehow中播放和暂停视频？

0 个答案: