单击导航点时如何停止OWL轮播YouTube视频 [英] How to Stop OWL Carousel YouTube Video when Clicking Navigation Dot(s)

问题描述

我花了很多时间让OWL轮播在以下网站上按要求工作.该轮播目前仅包含嵌入式YouTube视频，但也将包含一些文件.

我在鼠标悬停时暂停了轮播，效果很好.我遇到的问题是，当某人开始播放视频，然后单击一个点以转到另一个项目时，视频(音频)将继续播放.

我可能会割头发，但是如果有一种简单的方法可以停止旋转木马中任何(和所有)物品的视频/音频，我当然会很高兴知道的.

peter.certifiedtransmission.com

解决方案

在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/

I have spent a lot of time getting the OWL carousel to work as desired on the website below. The carousel currently only contains embedded YouTube videos but will also contain some files as well.

I have the carousel pausing on mouseover and it works great. Issue I have is that when someone starts a video, and then clicks a dot to go to another item, the video (audio) keeps playing.

I may be splitting hairs but if there is a simple way to stop the video / audio of any (and all) items in the carousel I sure would appreciate knowing how.

peter.certifiedtransmission.com

解决方案

In OWL Carousel 2.3.4:

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

Use onTranslate event/callback:

    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), "*");

    }

}

This example uses pause - however to stop the Video change:

"func": "pauseVideo" to "func": "stopVideo"

Also your youtube iframe video must include ?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>

Credit to: https://michaelsmyth.co.uk/pausing-youtube-vimeo-videos-postmessage/

这篇关于单击导航点时如何停止OWL轮播YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！