如何在mvc中播放.mp4视频时停止滑动条？

Question

我使用“bxlider.js”插件幻灯片1 “Html <>”视频和2我的MVC项目中的图像。我的问题是当我播放视频时，滑块仍然滑动。

这里是我的代码：

$('.bxslider').bxSlider({ 
 
      auto: true, 
 
      autoControls: true, 
 
     });

<ul class="bxslider"> 
 
    <li> 
 
    <video id="HomePageVdo" height="210" controls="controls" > 
 
     <source class="video-width" src="~/Media/HomePageVdo.mp4" type="video/mp4"> 
 
    </video> 
 
    </li> 
 
    <li> 
 
    <img src="~/Media/Sample1.png" role="img" width="350" height="210" alt="Sample1" title="Sample1"/> 
 
    </li> 
 
    <li> 
 
    <img src="~/Media/Sample2.jpg" role="img" width="350" height="210" alt="Sample2" title="Sample2"/> 
 
    </li> 
 
</ul>

请需要帮助...任何其他插件面包车帮助 谢谢！

Answer 1

Finally got the solution..

 var videoID = document.getElementById('HomePageVdo'); 

     var slider = $('.bxslider').bxSlider({ 
      auto: true, 
      autoControls: true, 
     }); 

     videoID.addEventListener("play", function() { 
      slider.stopAuto(); 
     }); 

     videoID.addEventListener("pause", function() { 
      slider.startAuto(); 
     }); 

     videoID.addEventListener("end", function() { 
      slider.startAuto(); 
     }); 

Answer 2

试试这个： -

var slider = $('.bxslider').bxSlider({ 
       auto: true, 
       autoControls: true, 
      }); 

，并在任何你想停止使用bxslider和slider.stopShow();何时开始使用slider.startShow();如下图所示： -

$("#HomePageVdo").on("pause", function (e) { 
    slider.startShow(); 
}); 

$("#HomePageVdo").on("play", function (e) { 
    slider.stopShow(); 
});