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

【问题标题】：Pause youtube video when slide the next item滑动下一个项目时暂停 youtube 视频
【发布时间】：2016-08-11 05:00:55
【问题描述】：

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

【问题讨论】：

请参考9bugs.in/…

标签： javascript jquery twitter-bootstrap youtube

【解决方案1】：

DEMO

我将您的 HTML 修改如下。

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

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

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

【讨论】：

这里相同.. 移动到第三张幻灯片时无法暂停第二张幻灯片视频。
哦，对不起。你是这个意思？ jsfiddle.net/2q99udgk/407 但是，您应该检查结构。
那行得通，但你能解释一下是什么问题吗？
嗯，我认为当你使用自动播放时，上一个视频不会暂停。如果有时间，我会写一个重构代码。
@user3932810 很抱歉迟到了。请确保我的小提琴。 jsfiddle.net/2q99udgk/408

【解决方案2】：

您可以使用 youtube iframe api。为此，您必须将 ?enablejsapi 附加到您的 iframe 源。您也许应该按照 youtube 上的教程进行操作。

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

onYouTubeIframeAPIReady() 将被触发
现在创建一个 yt 播放器对象
您的代码现在可以在您的对象上调用 pauseVideo()

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

【讨论】：

【解决方案3】：

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

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

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

查看修改后的jsfiddle。

【讨论】：

在这里，当你滑动发送幻灯片时，第一张幻灯片视频被暂停，但你播放第二张幻灯片视频并移动到第三张幻灯片，那么第二张幻灯片视频仍在播放
我认为问题出在其他地方。 jsfiddle.net/2q99udgk/406我给每个轮播项目一个不同的类（foo1，foo2，foo3）。然后在 callPlayer 中，我提醒iframe.className。看看它如何连续显示两次foo1。
但是当移动到第三张幻灯片时暂停第二张幻灯片视频的解决方案是什么？
知道为什么视频在来回滑动时会删除缩略图并显示黑屏吗？