Question

INFO
我正在使用我喜欢的bxslider.js，但它在播放视频方面存在问题。作者认为这不是问题，并在此指出。

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

问题
这是所需的顺序：
（1）显示视频幻灯片
（2）用户点击播放和视频播放
（3）滑块暂停，以便用户可以观看视频
（4a）视频完成并且滑块自动恢复-OR-
（4b）用户暂停视频和滑块自动恢复-OR-
（4c）用户单击下一个/上一个幻灯片按钮控件，视频暂停和滑块恢复。当用户在滑块旋转中显示时，用户可以取消暂停视频。

是否可以使用4a，4b和4c，还是需要找到更好的滑块？

重要提示：我不想要依赖静态的next / prev按钮 - 我希望滑块自动运行。

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

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

1 个答案: