Question

我花了很多时间在下面的网站上按照需要使OWL轮播工作。轮播目前仅包含嵌入的YouTube视频，但也包含一些文件。

我将鼠标悬停的旋转木马暂停，效果很好。问题是当有人开始播放视频，然后点击一个点转到另一个项目时，视频（音频）会继续播放。

我可能会分裂头发，但如果有一种简单的方法来停止旋转木马中任何（和所有）项目的视频/音频，我肯定会很高兴知道如何。

peter.certifiedtransmission.com

Answer 1

在OWL Carousel 2.3.4中：

https://jsfiddle.net/iamrobert/p6y87hs0/12/

使用onTranslate事件/回调：

    onTranslate: function(event) {
    var currentSlide, player, command;

    currentSlide = $('.owl-item.active');

    player = currentSlide.find(".flex-video iframe").get(0);

    command = {
        "event": "command",
        "func": "pauseVideo"
    };

    if (player != undefined) {
        player.contentWindow.postMessage(JSON.stringify(command), "*");

    }

}

此示例使用暂停-但是要停止视频更改：

“ func”：“ pauseVideo”到“ func”：“ stopVideo”

您的YouTube iframe视频还必须包含？enablejsapi = 1

<div class="item">
  <div class="flex-video">
    <iframe src="https://www.youtube.com/embed/G1lq40tR72Q?enablejsapi=1" width="560" allowfullscreen frameborder="0" height="315"></iframe>
  </div>
</div>

信用至：https://michaelsmyth.co.uk/pausing-youtube-vimeo-videos-postmessage/

单击导航点时如何停止OWL轮播YouTube视频

1 个答案: