Question

按照此示例，我正在尝试使用Owl Carousel 2创建一个完整的浏览器宽度滑块 http://www.owlcarousel.owlgraphic.com/demos/video.html

在演示中，它只展示了如何嵌入视频 - 除此之外，我希望能够以完整浏览器的宽度（和高度）显示它们，并在用户到达特定幻灯片时让它们自动播放。我猜这将涉及使用Vimeo和YouTube的API，因为旋转木马有点受限但不知道从哪里开始。想法？

Answer 1

我和OwlCarousel 2做了类似的事情，这是我对它的解决方法。

$('.owl-carousel').owlCarousel({       
   onInitialized:theThing,       
  });
function theThing(event){
  alert("")
  $(".active .owl-video-play-icon").trigger("click")
};

一旦Owl初始化，我就会在回调上触发点击功能，以便视频出现并在开始时开始播放。

Answer 2

要将视频设置为浏览器的完整宽度和高度，您可以将其添加到您的CSS并为视频提供ID＆＃39; videoID＆＃39;：

#videoID{
min-width: 100%;
min-height: 100%;
position: absolute;
}

这会使您网页上的任何视频的最小宽度和高度达到视频的100％，并使其保持原样。

编辑：当你到达幻灯片时有一个视频自动播放，你总是可以使用jquery或javascript创建一个变量，每当按下右边的幻灯片时，你可以让变量更高一些：

var counter = 0;

$(#slider).on('click', function(){
counter++;
});

您现在可以按如下方式查看计数器：

if (counter == 1){
    $('sliderright').on('click', function(){
        $document.getElementById('video').play();
    });
};

这可能不是最好的方式，但我相信它可行。

Answer 3

(function($) {
    $(document).ready(function() {
        setTimeout(
            function() {
                $(".active .owl-video-play-icon").trigger("click");
            }, 1000);
    });
    $(document).on('click', '.owl-dot', function() {
        if ($('.owl-item.active').hasClass('owl-video-playing')) {} else {
            setTimeout(
                function() {
                    $(".active .owl-video-play-icon").trigger("click");
                }, 1000);
        }
    });
})(jQuery);

使用Owl Carousel 2的完整浏览器宽度视频自动播放

3 个答案: