当嵌入电影播放时停止滑块

Stop slider when embedded movie plays.

本文关键字：播放 电影      更新时间：2023-09-26

我有一个滑动条，我已经修改了代码，所以它在鼠标悬停时停止。到目前为止一切顺利。但. .正如你在html中看到的，我有一个嵌入视频的滑块。

我的问题是，即使滑块现在停在悬停，我也希望它停止当我播放嵌入视频。最好(但不是必须)在视频结束时恢复滑块。

Javascript: 

    var VSliderHome = true;
$("#SliderHome").hover(function() {
VSliderHome = false;
}, function() {
   VSliderHome = true;
});
function autoplaySlider(length) {
    if (VSliderHome) {
        if (visibleSlidePosition < length - 1) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
        visibleSlidePosition += 1;
    } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
        visibleSlidePosition = 0;
    }
    updateNavigationMarker(navigationMarker, visibleSlidePosition + 1);
    updateSliderNavigation(sliderNav, visibleSlidePosition);
}
}
HTML: 

<slider.body>
<section class="cd-hero">
   <ul id="SliderHome" class="cd-hero-slider autoplay">
   <li class="selected">
      <div class="cd-full-width" style="background-image: url(img/fileupload/zlide.jpg)">
         <div class="textcont-left">
            <h2>text</h2>
            <p>text</p>
            <a href="#" class="cd-btn">Köp Nu</a>
         </div>
      </div>
   </li>
   <li style="background-image: url(img/fileupload/smatrphones.jpg)">
      <div class="cd-half-width cd-img-container">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/fXu2fWz" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="cd-half-width">
         <div class="textcont-right">
            <h2>text</h2>
            <p>text</p>
            <a href="#" class="cd-btn">Mer Information</a>
         </div>
      </div>
      </li>
</section>
</body>

在滑块的当前函数中添加点击功能…类似于悬停，但是在点击时，这样当你点击播放区域时，它会影响滑动条…即使你点击播放，点击与滑块无关，事实是，视频在滑块上，滑块正在等待点击功能的结果……作品。

使用视频事件play/pause来更改变量

$('video').on('play pause', function(e){
    VSliderHome = e.type === 'pause';
})

您需要从视频中侦听事件并做出相应的响应。你可以在YouTube播放器API参考中看到如何做到这一点的细节。

作为一个简单的例子，您可能想要这样做:

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // stop slider
    } else if (done) {
      // start slider
    }
  }
相关文章：