Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放

2023-12-13

嗨,我在获得光滑的旋转木马时遇到了麻烦(http://kenwheeler.github.io/slick/),当我在滑块内使用 YouTube 剪辑时停止自动播放。

有人说我可以使用 onAfterChange 但仍然不知道如何在视频打开时关闭自动播放(请注意,这是当鼠标不在视频上时)

这是我正在使用的代码,任何帮助都会很好:)

$("#slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 7000,
    infinite: true
});

/* **************************************** *
 * Youtube API
 * Create player
 * **************************************** */
var player;
window.onYouTubePlayerAPIReady = function() {

    $("#player").hide();
    var player_id   = 'player';
    var $player     = jQuery('#'+player_id);
    var parent      = $player.parent();

    player = new YT.Player(player_id, {
        videoId: 'HevnOuJY1TM',
        height: parent.height(),
        width: '100%',
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'rel' : 0,
            'disablekb' : 0,
            'modestbranding' : 1,
            'showinfo': 0,
            'html5': 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }


    });

    var sizeVideo = _.debounce(function() {

        player.setSize('100%', parent.height());

    }, 500);

    jQuery(window).on('load resize', sizeVideo);

    jQuery(window).trigger('resize');
};

function onPlayerReady() {
    $("#slide-video").on("click", function() {
        $(this).css('background','transparent');
        $("#player").show();
        player.playVideo();
    });
}

function onPlayerStateChange(event) {

    if(event.data === 0) {
        $(".countdown").fadeIn();
    }

    if(event.data === 1) {
        $(".countdown").fadeOut();
    }

    if(event.data === 2) {
        $(".countdown").fadeIn();
    }

    if( 1 === event || 2 === event || 3 === event) {
        $('#slider')
            .slick('slickPause')
            .slick('slickSetOption', 'autoplay', false, true);
    } else {
        $('#slider').slick('slickPlay')
            .slick('slickSetOption', 'autoplay', true, true);
    }
}

});

我找到了解决我的问题的方法:

function onPlayerReady() {
        $("#slide-video").on("click", function() {
            $(this).hover(function(){
                slider.slick('slickPause');
            });
            $(this).css('background','transparent');
            $("#player").show();
            player.playVideo();
        });
    }

    function onPlayerStateChange(event) {
        if(event.data === 0 || event.data === 2) {
            $(".countdown").fadeIn();
        }

        if(event.data === 1) {
            $(".countdown").fadeOut();
        }

        if( 1 === event.data || 2 === event.data || 3 === event.data) {
            slider.slick('slickPause');

        } else {
            slider.slick('slickPlay');
        }
    }

这对我在 chrome 和 Safari 中有效。Firefox 不起作用,IE 我无法尝试,因为我不是在 PC 上而是在 MAC 上,但这就是为什么我添加了悬停功能,以防有人想要将鼠标放在那里?

更新:好的,它现在适用于所有......它就在您暂停视频然后在滑块消失后恢复它,一旦它将不再使用 slickPause 功能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放 的相关文章

随机推荐

  • 是否可以将 git 提交挂钩到 Textmate 上的保存?

    让我成为 Eclipse 用户的一个特性是 每次点击 保存 时 它的副本都会进入 Eclipse 本地历史记录 然后你可以对本地历史进行比较 不过 我还是想使用 Textmate 因为我听说过它的优点 我知道有一个功能要求对于未来的版本 但
  • Android,我应该将 MediaPlayer 设为服务吗?

    我正在尝试编写一个 Android 应用程序 该应用程序将允许用户收听广播电台 我已经启动和停止按钮可以工作并且它可以播放流 如果我按主页键并开始使用手机执行其他操作 流将继续播放 这就是我希望它发挥作用的方式 我是否应该创建一个服务来播放
  • 宏增加值然后连接

    我想创建一个递归宏 它将创建 下一个 类 Example define PRINTME indexNum class m indexNum 1 The indexNum 1被评估为int 并且不会连接到类名 在连接之前 如何使编译器对其进行
  • Rails 在 save() 失败后不会回滚事务

    我有这个域模型 用户拥有一组项目 并且项目的状态可能无法通过验证 验证工作正常 我什至看到当我使用时会调用异常save 在我的控制器中 我有这个 user items lt lt item if user save render json
  • 在 graphql 中嵌套数据的正确方法是什么?

    我的数据库中有一个地址 我已将其放入location哈希 哈希包含单独的键streetAddress city state and zipCode 我已将数据像这样嵌套在我的 graphql 架构文件中 location streetAdd
  • 导入使用原始文件,但不在 IDLE 中

    10秒后更新现在已正确修复 感谢 JF 和 Gauden UPDATE我通过将 IDLE 文件保存在其他工作文件所在的目录中找到了临时修复程序 如果可以的话 我仍然想知道如何完全修复它 这不是永久修复 因此如果您想尝试并帮助使其在保存文件的
  • -webkit 和 -moz 浏览器中的字体大小不同

    检查这个jsfiddle 为什么日期选择器的大小存在差异font size被设定为1 5em em 的数量并不重要 我尝试了不同的字体大小 但仍然遇到同样的问题 红色框设置为 460px 您可以在其中看到 Firefox 和 chrome
  • 需要使用批处理从字符串中获取所需的数据

    我只需要提取给定字符串中的 URL 和应用程序 ID 并保存在变量中 url url ad ifwcash com www delivery afr php zoneid 127 cb 2015738640 app 61 最终结果如 var
  • GHCi 中函数的类型推断与从文件加载的不同

    我写了一个函数add in test hs add x y gt x y 然后我加载了test hs在 GHCi 版本 7 8 3 中 并输入 t add 观看什么类型add 是 结果看起来不正确 Main gt t add add Int
  • 将 Maven 项目作为依赖项添加到 Android Studio 应用程序

    我目前正在使用 Android Studio 1 2 开发 Android 应用程序 我想在我的 Android 应用程序中使用外部 Java 项目作为依赖项 该 Java 项目是一个 Maven 项目 如何将此项目作为依赖项直接添加到我的
  • NFC 标签检测后我的 cordova 应用程序未启动

    我在用Apache cordova构建 Android 应用程序 我提出了申请NFC特征 我们已经将数据写入 NFC 标签 其中mimetype myApp firstNFCApp 在我的应用程序中 每当检测到带有此标记的标签时mimety
  • MVVM 中的数据模板是否已过时?

    我创建了以下模型 简化了代码以说明情况 public abstract class Account public string Name get set public class Person Account public string F
  • 将 SOAP 与 Ruby 结合使用的最佳方式是什么?

    我的一位客户要求我将第 3 方 API 集成到他们的 Rails 应用程序中 唯一的问题是 API 使用 SOAP Ruby 基本上已经放弃了 SOAP 转而采用 REST 他们提供了一个 Java 适配器 显然可以与 Java Ruby
  • 将嵌套整数数组转换为平面整数数组 - javascript

    我的问题的工作背景是数据可视化 以这种方式将嵌套整数数组转换为平面整数数组是否正确 var inputArray 1 2 3 4 5 6 7 8 9 10 var inputArrayStr inputArray toString var
  • Python - 如何获取 CSV 文件中所有列的数据类型?

    我正在尝试从 CSV 文件中获取每列的所有数据类型 文件中没有关于数据类型的文档 手动检查将需要很长时间 它有 150 列 开始使用这种方法 df pd read csv tmp file csv gt gt gt df dtypes a
  • *Result 和 *ResultWCF 服务中指定的参数?

    在我的 WCF 服务中 我有一个函数 例如 bool ValidateLogin string user string password 在我将其托管在 Windows azure 并将引用添加到我的 Web 应用程序中后 该函数变为 bo
  • 输入样式=文件作为按钮

    我试图在 input file 又名上传器中添加一些样式 但我遇到了困难 是否有一些非 FLASH 解决方案 可能是 jquery 甚至是纯 JavaScript 这是可行的 但并不那么容易 您需要使用普通输入元素 按钮来模拟文件输入 并用
  • Java 中不同类型的泛型类的静态成员是否不同?

    Spence 问了这个上一个问题 那么 这在 Java 中是如何工作的呢 Java 中泛型类型在运行时会被丢弃 那么用不同泛型类型实例化的类的静态变量会发生什么情况呢 Java 中的静态成员不能具有来自包含它们的类的泛型类型参数 publi
  • 委托从模态呈现的视图控制器传回数据

    假设我们有两个视图控制器 一个带有标签的父视图控制器和一个带有表格视图的模态呈现子视图控制器 如何使用委托将用户在表视图中的选择传递回父级 视图控制器1 var delegate vc2delegate override func view
  • Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放

    嗨 我在获得光滑的旋转木马时遇到了麻烦 http kenwheeler github io slick 当我在滑块内使用 YouTube 剪辑时停止自动播放 有人说我可以使用 onAfterChange 但仍然不知道如何在视频打开时关闭自动