Question

所以我在主页上使用bxslider，并且希望减少网站的加载时间。变慢的原因之一是当滑块上有一个或多个youtube视频时，所以我跟随this solution但使用了Jquery。

它的作用是仅加载youtube视频的缩略图，并且在您单击占位符播放按钮之前，它将播放实际的视频。我的问题是，当您单击占位符按钮时，它会加载视频并播放，但幻灯片会继续移动，当您在iframe中正常从youtube添加视频时，这不会发生，因为当您单击真正的播放按钮时，它会触发阻止滑块移动的某些操作，但是我没有使用占位符按钮执行此操作。

这是我的滑块的html：

<li>
    <div id="video{{forloop.counter}}" class="youtube" data-embed="{{ video_code }}"> 
        <!--"play" button -->
        <div class="play-button"></div> 
    </div>
</li>

这是添加iframe并播放的jQuery，它的作用是为每个youtube视频添加缩略图，然后单击div时添加实际的iframe：

var youtube = $(".youtube");
youtube.each(function(url_index){
    var source = "https://img.youtube.com/vi/"+ youtube[url_index].dataset.embed +"/maxresdefault.jpg";
    var image = new Image();
    image.src = source;
    $(this).on('load', function() {
        youtube[url_index].appendChild(image);
    }(url_index));
    $(this).click(function() {
        $(this).html("");
        $(this).append('<iframe width="19200" height="800" frameborder="0" allow="autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen src="https://www.youtube.com/embed/'+youtube[url_index].dataset.embed+'?&showinfo=0&autoplay=1"></iframe>');
    });
});

最后这是我的bxSlider设置：

$('.bxslider').bxSlider({
            auto: true,
            easing: 'swing',
            captions: false,
            autoControls: false,
            pause: 000,
            video: true,
            useCSS: false,
            adaptiveHeight: false,
            slideMargin: 0,
            pager: false,
            controls: true
        });

视频自动播放时，如何阻止bxslider转到下一张幻灯片？

0 个答案: