Question

我在页面上使用bootstrap滑块。当滑块移动到下一个时，我需要暂停当前播放的视频。我尝试使用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

Answer 1

我在javascript部分绑定了轮播控件，而不是在html中将其内联。

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

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

请参阅修订后的jsfiddle。

Answer 2

DEMO

我修改了您的HTML，如下所示。

- onclick="callPlayer("current","pauseVideo")"
+ onclick="callPlayer('current','pauseVideo')"

我将LOAD TYPE从onLoad更改为No wrap in <head>。

但是，您应该使用jQuery on方法附加Click事件。

Answer 3

您可以使用youtube iframe api。为此，您必须将window.onload = function() { var stickySidebar = $('.bk-form-wrap').offset().top; var $div = $('div.bk-form-wrap'); $(window).scroll(function() { if ($(window).scrollTop() > stickySidebar) { $div.css({ position:'fixed', height: '70px' }); $div.animate({ top: '95px', //top:'100%', // marginTop: - $div.height() }); } else { } if ($(this).scrollTop() == 0) { //Call your event here $div.css({ position:'relative', }); $div.animate({ top:'0px', }); } }); };附加到iframe来源。您应该按照youtube上的教程进行操作。

https://developers.google.com/youtube/iframe_api_reference

onYouTubeIframeAPIReady（）将被解雇
现在创建一个yt玩家对象
您的代码现在可以在您的对象上调用pauseVideo（）

在这个问题中也回答：Pausing YouTube iFrame API in JavaScript

滑动下一个项目时暂停youtube视频

3 个答案: