Javascript 隐藏iframe时如何暂停YouTube播放器？_Javascript_Youtube Api_Youtube Javascript Api

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

javascript youtube-api

Javascript 隐藏iframe时如何暂停YouTube播放器？,javascript,youtube-api,youtube-javascript-api,Javascript,Youtube Api,Youtube Javascript Api,我有一个隐藏的div，在中包含一个YouTube视频。当用户单击链接时，该div将可见，然后用户应该能够播放视频当用户关闭面板时，视频应停止播放。我怎样才能做到这一点代码：看看我的展示短片，让你了解我的风格——通常被描述为权威、和蔼可亲和迷人在隐藏div之前，可以通过调用YouTube播放器实例上的stopVideo（）方法停止视频，例如 player.stopVideo() 有关更多详细信息，请参见此处：实现此行为的最简单方法是在必要时调用pauseVideo和playVideo

我有一个隐藏的div，在

中包含一个YouTube视频。当用户单击链接时，该div将可见，然后用户应该能够播放视频

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

代码：


看看我的展示短片，让你了解我的风格——通常被描述为权威、和蔼可亲和迷人

在隐藏div之前，可以通过调用YouTube播放器实例上的

stopVideo（）

方法停止视频，例如

player.stopVideo()

有关更多详细信息，请参见此处：

实现此行为的最简单方法是在必要时调用

pauseVideo

和

playVideo

方法。受我的测试结果的启发，我编写了一个无插件函数来实现所需的行为

唯一的调整：

我添加了一个函数，
```
toggleVideo
```
我在YouTube的URL中添加了
```
？enablejsapi=1
```
，以启用该功能

演示：
代码：


功能切换视频（状态）{
//如果状态==“隐藏”，则隐藏。否则：显示视频
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（“{”事件“：”命令“，”函数“：”+func+”，“参数“：”}'，“*”）；
}
看看我的展示短片，让你了解我的风格——通常被描述为权威、和蔼可亲和迷人

嘿，一个简单的方法是简单地将视频的src设置为nothing，这样视频在隐藏时会消失，然后在单击打开视频的链接时将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>


函数deleteVideo（）
{
document.getElementById（'VideoPlayer'）.src=''；
}
函数LoadVideo（）
{
document.getElementById（'VideoPlayer'）.src='1〕http://www.youtube.com/embed/WHAT曾经，YOUTUBE，视频，你，等等；
}
加载视频
关闭

以下是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方法的modal div本身（#video div）和iframe（#video iframe），它的视频url为src=“”，后缀enablejsapi=1？，可以对播放器进行编程控制（例如

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

RobW在这里和其他地方的答案非常有用，但我发现我的需求要简单得多。我已经回答了这个问题，但也许在这里也会有用

我有一个方法，可以在其中形成要加载到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];

希望这能有所帮助！

Rob W answer帮助我找到了在隐藏滑块时如何在iframe上暂停视频的方法。但是，我需要进行一些修改才能使其正常工作。以下是我的html代码片段：

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

另外，作为一个更简单的示例，请在中查看这一点，因为您需要在iframe的src中设置

？enablejsapi=true

，然后才能使用中提到的

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";
    }
  }
}

函数initVideos（）{
//在页面上查找所有视频iFrame：
变量iframes=$（“.video”）.find（“iframe”）；
//对于每一项：
对于（var i=0；i


…如果您在document.ready
上调用此命令，则div中具有“video”类的所有iFrame都将在其源代码中添加enablejsapi=true
，从而允许playVideo/pauseVideo命令对其进行操作
（注意，本例使用jQuery作为设置var-iframes
的一行，但如果不使用jQuery，一般的方法应该与纯Javascript同样有效）。
RobW的方法对我来说非常有效。对于使用jQuery的人，我最终使用了一个简化的版本：
var iframe = $(video_player_div).find('iframe');

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

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

在本例中，“video_player”是包含iframe的父div。
我想分享我使用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>

我喜欢这种方法，因为它可以让视频在你停止的地方暂停，以防你以后想回去继续观看。它对我来说效果很好，因为它在视频模式中查找具有特定id的iframe。不需要特殊的YouTube元素id。希望有人会发现这也很有用。
这里是一个示例根据RobW和DrewT的答案暂停页面上所有视频的简单jQuery片段：
jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

只需移除iframe的src
$('button.close').click(function(){
    $('iframe').attr('src','');;
});

这种方法需要jQuery。首先，选择iframe：
var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

现在选择此iframe的“播放/暂停”按钮并单击它
$('button.ytp-play-button.ytp-button', yourIframe).click();

我希望它能对你有所帮助。
这对我和YT player的合作很好
 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（）；一个更简洁、优雅和安全的答案：在视频URL末尾添加“？enablejsapi=1”，然后构造并串接一个
jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

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

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

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

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

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

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