使用 Owl Carousel 2 自动播放全浏览器宽度的视频答案

【问题标题】：Full browser width video autoplay with Owl Carousel 2使用 Owl Carousel 2 自动播放全浏览器宽度的视频
【发布时间】：2014-10-14 11:05:29
【问题描述】：

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

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

【问题讨论】：

标签： video youtube vimeo autoplay owl-carousel

【解决方案1】：

我正在用 OwlCarousel 2 做类似的事情，这是我的解决方法。

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

一旦 Owl 初始化，我就会在回调中触发 click 函数，这样视频就会出现并在开始时开始播放。

【讨论】：

【解决方案2】：

要将视频设置为浏览器的全宽和全高，您可以将其添加到您的 CSS 中，并为视频指定 id 'videoID'：

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

这可能不是最好的方法，但我相信它可以工作。

【讨论】：

【解决方案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);

【讨论】：