如果视频在主要英雄中处于活动状态,则隐藏视频导航缩略图

时间:2019-07-11 15:01:29

标签: jquery html css slick.js

我正在将Slick.js用于网站的视频部分。有一个主视频,然后是视频缩略图的导航。一切运转正常。但是,我想说的是,当视频1在轮播的主英雄部分中播放时,该视频的缩略图隐藏在缩略图导航部分中。

我尝试在光滑的滑块上检查活动的课程并基于此进行隐藏,但是缩略图未绑定到实际的主视频上

<!-- Main Video -->
* 2 examples although there are more videos
<div class='video--slider'>
  <div>
    <div style="position: relative; display: block; max-width: 
    960px;">
      <div style="padding-top: 56.25%;">
        <!--- change data-video-id # from brightcove to change the 
    video --->
        <video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; 
    bottom: 0px; left: 0px; width: 100%; height: 100%;">
            </video>
      </div>
    </div>
  </div>
  <div>
    <div style="position: relative; display: block; max-width: 
    960px;">
      <div style="padding-top: 56.25%;">
        <!--- change data-video-id # from brightcove to change the 
    video --->
        <video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; 
     bottom: 0px; left: 0px; width: 100%; height: 100%;">
            </video>
      </div>
    </div>
  </div>
</div>
<!--horizontal thumbnails -->
<div class='video--slider-nav'>
  <div class="horizontal-scroll_thumbnail-container">
    <div class="thumbnail-video--width" style="position: relative; 
     display: block;">
      <div style="padding-top: 56.25%;">
        <!--- change data-video-id # from brightcove to change the 
      video --->
        <video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
      </div>
    </div>
  </div>
  <div class="horizontal-scroll_thumbnail-container">
    <div class="thumbnail-video--width" style="position: relative; 
     display: block;">
      <div style="padding-top: 56.25%;">
        <!--- change data-video-id # from brightcove to change the video --->
        <video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
      </div>
    </div>
  </div>
$(document).ready(function() {
  $('.video--slider').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  });

  $('.video--slider-nav > div').click(function() {
    $('.video--slider').slick('slickGoTo', $(this).index());
  });
});

隐藏主要视频部分中正在播放的视频的缩略图

0 个答案:

没有答案