javascript - 滑动下一个项目时暂停 YouTube 视频

标签 javascript jquery twitter-bootstrap youtube

我在我的页面上使用 Bootstrap slider 。当 slider 移动到下一个视频时,我需要暂停当前正在播放的视频。 我尝试使用youtube回调,但似乎不起作用,可能是我的申请方式不正确。

这是我用过的

jQuery(function ($) {
        $('div.carousel-inner div.active').attr('id', 'current');
    });

    function callPlayer(frame_id, func, args='') {

        if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
        var iframe = document.getElementById(frame_id);
        if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
            iframe = iframe.getElementsByTagName('iframe')[0];
        }
        if (iframe) {
            iframe.contentWindow.postMessage(JSON.stringify({
                "event": "command",
                "func": func,
                "args": args || [],
                "id": frame_id
            }), "*");
        }

        jQuery(function ($) {
            $('div.carousel-inner div.item').attr('id', '');
            $('div.carousel-inner div.active').attr('id', 'current');
        });
    }

<强> Demo

最佳答案

我在 javascript 部分绑定(bind)了轮播控件,而不是将其内联到 html 中。

jQuery(function ($) {
    // ...

    $(".carousel-control").click(function() {
        callPlayer('current','pauseVideo');
    });
});

查看修订后的jsfiddle .

关于javascript - 滑动下一个项目时暂停 YouTube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36711225/

相关文章:

jquery - BootStrap 多个事件导航选项卡问题

javascript - 使用 JAVASCRIPT 从 HTML 上的 JSON 数组读取数据

javascript - TypeScript 可选回调参数与传递给它的匿名函数不匹配

css - Bootstrap : How to change the breakpoint where the navbar collapse ?

javascript - Knockout.js 单击更改(不切换)css 类

asp.net - 客户端库或 AJAX 控制工具包? - ASP.NET

javascript - 使用 jquery 检查 Bootstrap 设置单选按钮

javascript - document.execCommand ('copy' ) 命令在字符串的开头和结尾添加换行符

javascript - Spring Boot(在reactjs中注入(inject)脚本)

javascript - jQuery - 获取某些标签之间的所有 html