Question

我正在使用“bxlider.js”插件在我的MVC项目中滑动1 “Html＆lt;＆gt;”视频和2张图片。我的问题是当我正在播放视频时，滑块仍在滑动。

这是我的代码：

 $('.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

试试这个： -

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

Answer 2

终于得到了解决方案..

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

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

2 个答案: