如何在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(); 
});