时间戳

首页 > 解决方案 > 选择另一张幻灯片后如何暂停视频（Slick.js 和 VideoJS）

javascript - 选择另一张幻灯片后如何暂停视频（Slick.js 和 VideoJS）

问题描述

我正在尝试与轮播一起制作视频播放器，当您单击单个轮播幻灯片时，所需的视频会打开并播放。但是，我的问题是，一旦视频正在播放并且您转到下一张幻灯片，视频仍然在播放。我尝试使用此解决方案Slick slider 在幻灯片更改时暂停 youtube 视频，虽然它确实可以工作，但一旦视频停止，然后您回到暂停的同一视频，您将无法再次播放或与之交互完全没有，我该如何解决？

HTML

<div class='col videoCarouselMain'>
      <div class='videoCarouselMainItem'>
        <video id='storyVideo' class='video-js vjs-default-skin' controls width='700px' height='600px' data-setup='{}'>
          <source src='./assets/video.mp4' type='video/mp4'>
        </video>
      </div>
      <div class='videoCarouselMainItem'>
        <video id='storyVideo' class='video-js vjs-default-skin' controls width='700px' height='600px' data-setup='{}'>
          <source src='./assets/video2.mp4' type='video/mp4'>
        </video>
      </div>
      <div class='videoCarouselMainItem'>
        <video id='storyVideo' class='video-js vjs-default-skin' controls width='700px' height='600px' data-setup='{}'>
          <source src='./assets/video.mp4' type='video/mp4'>
        </video>
      </div>
      <div class='videoCarouselMainItem'>
        <video id='storyVideo' class='video-js vjs-default-skin' controls width='700px' height='600px' data-setup='{}'>
          <source src='./assets/video.mp4' type='video/mp4'>
        </video>
      </div>
    </div>

<div class='col videoCarousel'>
      <div class='videoCarouselItem'>
        <img class='fluid' src='assets/videoPoster.jpg'>
      </div>
      <div class='videoCarouselItem'>
        <img class='fluid' src='assets/poster2.jpg'>
      </div>
      <div class='videoCarouselItem'>
        <img class='fluid' src='assets/videoPoster.jpg'>
      </div>
      <div class='videoCarouselItem'>
        <img class='fluid' src='assets/videoPoster.jpg'>
      </div>
    </div>

JS


$('.videoCarouselMain').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.videoCarousel'
});
$('.videoCarousel').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.videoCarouselMain',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});


$('.videoCarouselMain').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  var current = $(slick.$slides[currentSlide]);
  current.html(current.html());
});

标签： javascripthtmlslick.js

解决方案

这是一个正确的脚本。

.on(
  "beforeChange",
  function (event, slick, currentSlide, nextSlide) {
    $(".slick-current video").attr(
      "src",
      $(".slick-current video").attr("src")
    );
    $(".slick-current .video-js").removeClass("vjs-playing");
  }
);

推荐阅读