隐藏iframe时如何暂停YouTube播放器？ [英] How to pause a YouTube player when hiding the iframe?

问题描述

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

I have a hidden div containing a YouTube video in an <iframe>. When the user clicks on a link, this div becomes visible, the user should then be able to play the video.

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

When the user closes the panel, the video should stop playback. How can I achieve this?

代码：

<!-- 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 -->

推荐答案

实现此行为的最简单方法是调用必要时， pauseVideo 和 playVideo 方法。受到我的结果的启发上一个答案，我已经编写了一个无插件功能来实现所需的行为。

The easiest way to implement this behaviour is by calling the pauseVideo and playVideo methods, when necessary. Inspired by the result of my previous answer, I have written a pluginless function to achieve the desired behaviour.

唯一的调整：

• 我添加了一个功能， toggleVideo


• 我添加了 ？enablejsapi = 1 到YouTube的网址，启用此功能

• I have added a function, toggleVideo
• I have added ?enablejsapi=1 to YouTube's URL, to enable the feature

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

代码：

Demo: http://jsfiddle.net/ZcMkt/
Code:

<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>

这篇关于隐藏iframe时如何暂停YouTube播放器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！