如何停止滑块并播放视频然后恢复

Question

信息
我正在使用我喜欢的bxslider.js，但它在播放视频时存在问题。作者认为这不是问题，并在这里指出了我。

问题
它显示视频幻灯片并播放视频，但滑块不断滑动，当滑块遍历每张连续的幻灯片时，您可以在后台听到它。用户体验不是很友好。

问题
这是所需的顺序：
(1) 播放视频幻灯片
(2) 用户点击播放和视频播放
(3) 滑块暂停，以便用户观看视频
(4a) 视频结束，滑块自动恢复 - 或 -
(4b) 用户暂停视频，滑块自动恢复 - 或 -
(4c) 用户单击下一个/上一个滑动按钮控件、视频暂停和滑动恢复。当视频出现在滑块旋转中时，用户可以取消暂停。

4a、4b 和 4c 是否可行，还是我需要找到更好的滑块？

重要提示：我确实不想依赖静态的下一个/上一个按钮 - 我希望滑块自动运行。

FIDDLE

---

HTML

<section id="container">
    <ul class="bxslider">
        <li>
            <div class="text">SLIDE 1</div>
            <div class="slide"><img src="http://dummyimage.com/600x300/000/fff" /></div>
        </li>
        <li>
            <div class="text">SLIDE 2</div>
            <iframe src="http://player.vimeo.com/video/17914974" width="600" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
        <li>
            <div class="text">SLIDE 3</div>
            <div class="slide"><img src="http://dummyimage.com/600x300/333/fff" /></div>
        </li>
    </ul>
</section>

JS

$('.bxslider').bxSlider({
    mode: 'horizontal', //horizontal vertical fade
    speed: 750, //transition duration
    infiniteLoop: true,
    captions: false,
    video: true,
    responsive: true,
    pager: true,
    pagerType: 'full', //full or short
    controls: true,
    auto: true,
    pause: 4000,
    autostart: true,
    autoHover: true,
    autoDelay: 2500,
    adaptiveHeight: false,
    onSliderLoad: function(){
        $("#container").css("visibility", "visible").hide().fadeIn(1000);
    }
});

CSS

 #container {
   margin: 0 auto;
   width: 600px;
   height: 300px;
   text-align: center;
   visibility: hidden;
   padding: 0 0 20px 0;
 }
 .text {
   width: 20%;
   color: #F00;
   z-index: 99999;
   position: absolute;
   top: 10px;
   left: 0;
   right: 0;
   text-align: center;
   padding: 10px;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, .5);
   margin: 0 auto;
 }
 /* override css*/
 .bx-wrapper .bx-viewport {
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   border: none !important;
 }
 .bx-controls-direction a {
   opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
 }
 .bx-wrapper:hover .bx-controls-direction a {
   opacity: 1;
 }

Answer 1

您可能需要直接的video 标签，而不是将其嵌入到 iframe 中。我不知道您是否需要 Vimeo Pro。 Vimeo video not working with HTML5 tag

Stop sliding when play Vimeo or Youtube video in the slider

或者你可以使用这个：http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/

然后改脚本：

media.addEventListener('play', function() {
 //Put the script here to pause the slider
}, false);