一次只播放一个视频 HTML5 和流畅的轮播答案

【问题标题】：Play only one video at a time HTML5 and slick carousel一次只播放一个视频 HTML5 和流畅的轮播
【发布时间】：2021-01-31 18:49:58
【问题描述】：

我创建了一个视频轮播，该视频轮播具有使用光滑滑块的自定义播放按钮。我在屏幕上有 3 个视频。我需要以这样的方式制作它，一次只播放一个视频。每当用户点击任何视频时，所有其他视频都应暂停，只播放预期的视频。

HTML：

<div id="slide-video">
<div class="single-video">
        <video loop preload="metadata" controls class="video">
            <source src="url/video1.mp4" />
        </video>
 <span class="playpause"></span>     
</div>  
<div class="single-video">
        <video loop preload="metadata" controls class="video">
            <source src="url/video2.mp4" />
        </video>
 <span class="playpause"></span>     
</div> 
 <div class="single-video">
        <video loop preload="metadata" controls class="video">
            <source src="url/video3.mp4" />
        </video>
 <span class="playpause"></span>     
</div>
<div class="single-video">
        <video loop preload="metadata" controls class="video">
            <source src="url/video4.mp4" />
        </video>
 <span class="playpause"></span>     
</div>
</div>

 Carousel JS: 
 $('#slide-video').slick({
 centerMode: true,
 centerPadding: '0px',
 dots: false,
 infinite: true,
 prevArrow:"<img class='a-left control-c prev slick-prev' src=''",
 nextArrow:"<img class='a-right control-c next slick-next' src=''",
 speed: 300,
 slidesToShow: 3,
 slidesToScroll: 1,
 responsive: [
 {
  breakpoint: 1024,
  settings: {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: true,
    dots: true
  }
},
{
  breakpoint: 600,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 1
  }
},
{
  breakpoint: 480,
  settings: {
    slidesToShow: 1,
    slidesToScroll: 1
  }
}

 ]
 });


HTML5 Video JS: 
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){   
$(this).children(".video").get(0).play();   
$(this).children(".playpause").fadeOut();
}else{   
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});

请帮忙。

【问题讨论】：

标签： javascript jquery html5-video

【解决方案1】：

所以我假设播放/暂停适用于点击的视频。所以你只需要暂停其他的。

$('.video').parent().click(function () {

  // Pause ALL videos first except the clicked one
  $('.video').parent().not($(this)).each(function(index, element){
    $(element).children(".video").get(0).pause();
    $(element).children(".playpause").fadeIn();
  })

  if($(this).children(".video").get(0).paused){
    $(this).children(".video").get(0).play();
    $(this).children(".playpause").fadeOut();
  }else{
    $(this).children(".video").get(0).pause();
    $(this).children(".playpause").fadeIn();
  }
});

这是相同的脚本，编写方式不同...事件处理程序直接附加到所有 .video 元素。

let allVideos = $('.video')

allVideos.on("click", function () {

  let clickedElement = $(this)

  // Pause ALL videos first except the clicked one
  allVideos.not(clickedElement).each(function(index, element){
    $(element)[0].pause();
    $(element).siblings(".playpause").fadeIn();
  })

  // play/pause the clickedElement
  if(clickedElement[0].paused){
    clickedElement[0].play();
    clickedElement.siblings(".playpause").fadeOut();
  }else{
    clickedElement[0].pause();
    clickedElement.siblings(".playpause").fadeIn();
  }
});

【讨论】：