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

IT技术 javascript youtube-api youtube-javascript-api
2021-02-04 05:32:53

我有一个隐藏的 div，其中包含一个<iframe>. 当用户点击一个链接时，这个 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 -->
6个回答

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

唯一的调整：

  • 我添加了一个功能， 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>
请注意，您必须?enablejsapi=1像这样将 iframe 嵌入 URL添加到 iframe 嵌入 URL 中：<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe>否则它将不起作用:)
2021-03-19 05:32:53
是的，如果这行得通，肯定需要绿色复选框。我也在采用这个解决方案 - 很棒的东西，我在 jQueryUI 手风琴中有这些视频帧，所以我需要将它附加到每个触发事件。
2021-03-24 05:32:53
@Jordan 这完全有道理，因为消息应该是 JSON。根据定义，JSON 使用双引号来引用键和值。
2021-03-27 05:32:53
只是想指出，遗憾的是，YouTube 的 API 确实让您对通过 postMessage 发送的消息使用双引号。例如，您不能切换到外部双引号和内部单引号。
2021-04-04 05:32:53
如果有人感兴趣，我更新了代码以在您单击引导程序 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":""}','*'); });
2021-04-05 05:32:53

这是 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 元素是调用 show / hide 方法的模态 div 本身（#video-div），以及具有视频 url 的 iframe (#video-iframe) 为 src="" 并具有后缀enablejsapi=1 ? 这可以实现对播放器的编程控制（例如. .

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

什么增强的可读性正在改变？以 if / else 为条件，但感谢你让我开始这个。我只是觉得我有一些有效的补充。
2021-03-15 05:32:53

这是一个简单的 jQuery 片段，用于根据 RobW 和 DrewT 的回答暂停页面上的所有视频：

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
只需将“pauseVideo”替换为“playVideo”即可。示例：jsfiddle.net/ora2kqzq/1
2021-03-25 05:32:53
如果您不想使用 jQuery，则在取消引用 jQuery 对象后，'each' 函数中的代码是相同的。即 node.contentWindow。...
2021-03-26 05:32:53
这不再有效......即使我尝试{"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"}之后{"event":"listening","id":1,"channel":"widget"}，这就是 YT.Player iframe api 发布到 youtube 嵌入的内容。
2021-03-31 05:32:53
再次显示视频时，如何将其反转以再次播放？
2021-04-11 05:32:53

嘿，一个简单的方法是简单地将视频的 src 设置为空，以便视频在隐藏时消失，然后当您单击打开视频的链接时将 src 设置回您想要的视频。只需将 id 设置为 youtube iframe 并使用该 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>
谢谢乔丹！我自己刚开始使用这个答案，并不知道这种行为。现在知道总比以后知道好:)
2021-03-25 05:32:53
向尝试此方法的任何人发出公平警告：如果您使用此方法在包含 YouTube 嵌入的 iframe 的 div 之间切换，可能会导致非常明显的延迟。当心。
2021-03-25 05:32:53
警告：使用 javascript修改iframe'ssrc会不经意地推到 上window.history，导致后退按钮问题。
2021-04-11 05:32:53

由于您需要?enablejsapi=true在 iframe 的 src 中进行设置，然后才能使用其他答案中提到的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 一样有效）。

其它你可能感兴趣的问题
上一篇在 JavaScript 中查找变量类型 下一篇如何在 JavaScript 中终止脚本？