隐藏 iframe 时如何暂停 YouTube 播放器？答案

【问题标题】：How to pause a YouTube player when hiding the iframe?隐藏 iframe 时如何暂停 YouTube 播放器？
【发布时间】：2012-01-29 20:56:46
【问题描述】：

我有一个隐藏的 div，其中包含 <iframe> 中的 YouTube 视频。当用户点击链接时，该 div 变为可见，用户应该能够播放视频。

当用户关闭面板时，视频应该停止播放。我怎样才能做到这一点？

代码：

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

【问题讨论】：

我不确定，但您可能必须找到一种方法来停止视频或从 div 中删除视频，而不仅仅是隐藏它..
你应该接受答案。

标签： javascript youtube-api youtube-javascript-api

【解决方案1】：

实现此行为的最简单方法是在必要时调用pauseVideo 和playVideo 方法。受previous answer 的启发，我编写了一个无插件函数来实现所需的行为。

唯一的调整：

我添加了一个函数，toggleVideo
我已将 ?enablejsapi=1 添加到 YouTube 的 URL，以启用该功能

演示：http://jsfiddle.net/ZcMkt/
代码：

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

【讨论】：

是的，如果可行的话，肯定需要绿色复选框。我也在采用这个解决方案 - 很棒的东西，我在 jQueryUI Accordion 中有这些视频帧，所以我需要将它附加到每个触发事件。
只是想指出，遗憾的是，YouTube 的 API 确实让您对通过 postMessage 发送的消息使用双引号。例如，您不能切换到外部双引号和内部单引号。
@Jordan 这完全有道理，因为消息应该是 JSON。根据定义，JSON 使用双引号来引用键和值。
如果有人感兴趣，我更新了代码以在您单击引导程序 3 模式上的“关闭”按钮时停止播放视频。 $( "#MyModal-close" ).click(function() { var div = document.getElementById("MyModal-videoWrapper"); var iframe = div.getElementsByTagName("iframe")[0].contentWindow; iframe.postMessage ('{"event":"command","func":"' + 'pauseVideo' + '","args":""}','*'); });
请注意，您必须将 ?enablejsapi=1 添加到 iframe 嵌入 URL，如下所示：<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe> 否则它将不起作用:)

【解决方案2】：

这是一个 jQuery 对 RobW 的回答，用于在模式窗口中隐藏/暂停 iframe：

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

所指的 html 元素是模态 div 本身 (#video-div) 调用 show / hide 方法，以及 iframe (#video-iframe) 其视频 url 为 src="" 并具有后缀enablejsapi=1? 启用对播放器的编程控制（例如 .

有关 html 的更多信息，请参阅 RobW 的回答。

【讨论】：

什么增强的可读性正在改变？以 if / else 为条件，但感谢您让我开始做这件事。我只是觉得我有一些有效的补充。

【解决方案3】：

根据 RobW 和 DrewT 的回答，这是一个简单的 jQuery sn-p 暂停页面上的所有视频：

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

【讨论】：

如果您不想使用 jQuery，则在取消引用 jQuery 对象后，“each”函数内的代码是相同的。即 node.contentWindow。 ...
当视频再次播放时，如何反转播放？
只需将“pauseVideo”替换为“playVideo”即可。示例：jsfiddle.net/ora2kqzq/1
这不再有效......即使我在 {"event":"listening","id":1,"channel":"widget"} 之后尝试 {"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"} 这是 YT.Player iframe api 发布到 youtube embed 的内容。
您必须确保在 iframe 源 URL 中包含 ?enablejsapi=1。这对我有用

【解决方案4】：

一个简单的方法是简单地将视频的 src 设置为空，以便视频在隐藏时消失，然后在单击打开视频的链接时将 src 设置回您想要的视频。 . 为此，只需为 youtube iframe 设置一个 id 并使用该 id 调用 src 函数，如下所示：

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

【讨论】：

警告：使用 javascript 修改 iframe 的 src 会无意中推送到 window.history，从而导致返回按钮问题。
感谢乔丹！我自己刚开始使用这个答案，并没有意识到这种行为。现在比以后知道更好:)
对尝试此方法的任何人的公平警告：如果您使用此方法在包含 YouTube 的 iframe 嵌入的 div 之间切换，可能会导致非常明显的延迟。小心。

【解决方案5】：

由于您需要在 iframe 的 src 中设置 ?enablejsapi=true 才能使用 other answers 中提到的 playVideo / pauseVideo 命令，因此通过 Javascript 以编程方式添加它可能会很有用（特别是如果，例如，您希望此行为适用于刚刚剪切和粘贴 YouTube 嵌入代码的其他用户嵌入的视频）。在这种情况下，这样的事情可能会很有用：

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

...如果您在 document.ready 上调用它，那么 div 中具有“视频”类的所有 iframe 都将在其源中添加 enablejsapi=true，这允许 playVideo / pauseVideo 命令对其进行处理。

（注意。这个例子使用 jQuery 来处理设置var iframes 的那一行，但是如果你不使用 jQuery，一般的方法应该与纯 Javascript 一样好）。

【讨论】：

【解决方案6】：

您可以通过在隐藏 div 之前调用 YouTube 播放器实例上的 stopVideo() 方法来停止视频，例如

player.stopVideo()

【讨论】：

什么是播放器对象以及如何访问它？我得到播放器未定义，视频仍在播放
使用 JS API 实例化它时可用。

【解决方案7】：

RobW 的方法对我很有效。对于使用 jQuery 的人，这是我最终使用的简化版本：

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

在此示例中，“video_player”是包含 iframe 的父 div。

【讨论】：

【解决方案8】：

我想分享一个使用 jQuery 提出的解决方案，如果您在单个页面上嵌入了多个 YouTube 视频，该解决方案就可以工作。就我而言，我为每个视频定义了一个模态弹出窗口，如下所示：

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

在这种情况下，videoModalXX 代表视频的唯一 ID。然后，以下函数停止视频：

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

我喜欢这种方法，因为它可以让视频在您中断的地方暂停，以防您想返回并继续观看。它对我很有效，因为它正在寻找具有特定 ID 的视频模式内的 iframe。不需要特殊的 YouTube 元素 ID。希望有人会发现这也很有用。

【讨论】：

这在没有大量代码的情况下效果很好。我在页面上有多个 YT 视频，只显示一个 YT 拇指，需要停止/暂停解决方案。通过将 pauseVideo 更改为 playVideo，我能够在视频扩展到全列宽时开始播放视频

【解决方案9】：

只需删除 iframe 的 src

$('button.close').click(function(){
    $('iframe').attr('src','');;
});

【讨论】：

但是他可能想在用户点击打开的时候继续玩。
兄弟，再次onclick通过jquery添加src，就可以了

【解决方案10】：

Rob W 的回答帮助我弄清楚了在隐藏滑块时如何在 iframe 上暂停视频。然而，我需要一些修改才能让它工作。这是我的 html 的 sn-p：

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

请注意，这适用于 localhosts，并且正如 Rob W 提到的，“enablejsapi=1”已添加到视频 URL 的末尾。

以下是我的 JS 文件：

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

另外，作为一个更简单的示例，请在 JSFiddle 上查看此内容

【讨论】：

【解决方案11】：

这种方法需要 jQuery。首先，选择您的 iframe：

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

现在您选择此 iframe 的按钮播放/暂停并单击它

$('button.ytp-play-button.ytp-button', yourIframe).click();

希望对你有帮助。

【讨论】：

【解决方案12】：

RobW 在这里和其他地方的回答非常有帮助，但我发现我的需求要简单得多。我已经回答了这个elsewhere，但也许它在这里也很有用。

我有一个方法可以形成要加载到 UIWebView 中的 HTML 字符串：

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

您可以忽略preparedHTML 字符串中的样式。重要的方面是：

使用 API 创建“YT.player”对象。有一次，我只有 iFrame 标签中的视频，这阻止了我以后用 JS 引用“播放器”对象。
我在网络上看到了一些示例，其中第一个脚本标记（带有 iframe_api src 标记的那个）被省略了，但我绝对需要它才能使其正常工作。
在 API 脚本的开头创建“播放器”变量。我还看到了一些省略该行的示例。
将 id 标记添加到要在 API 脚本中引用的 iFrame。我差点忘了那部分。
将“enablejsapi=1”添加到 iFrame src 标记的末尾。这让我犹豫了一段时间，因为我最初将它作为 iFrame 标签的一个属性，这对我不起作用/不起作用。

当我需要暂停视频时，我只需要运行这个：

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

希望有帮助！

【讨论】：

如果您想知道为什么没有投票，那是因为这不是 javascript，因此对于 OP 的用例（即 iframe 引用 youtube 嵌入 url 而不是 iOS 应用程序）来说没有用。
@Vroo 是的，我明白了。只是想在这里留下这个答案，以防另一个 iOS 人来到这里并像我一样发现了这个问题。

【解决方案13】：

这对我来说很适合 YT 播放器

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo();

【讨论】：

【解决方案14】：

更简洁、优雅和安全的答案：在视频 URL 的末尾添加“?enablejsapi=1”，然后构造并字符串化表示暂停命令的普通对象：

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

使用Window.postMessage 方法将生成的 JSON 字符串发送到嵌入的视频文档：

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

确保为 Window.postMessage 方法的 targetOrigin 参数指定视频 URL，以确保您的消息不会发送给任何非预期的收件人。

【讨论】：