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

Question

我有一个隐藏的 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 -->

score 191 · Accepted Answer

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

唯一的调整：

我添加了一个功能，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>

score 23 · Accepted Answer

这是一个 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 方法，以及具有视频 url 的 iframe (#video-iframe) 是 src="" 并具有后缀enablejsapi=1 ? 它可以对播放器进行编程控制（例如 .

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

score 16 · Accepted Answer

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

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

score 9 · Accepted Answer

嘿，一种简单的方法是简单地将视频的 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>

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

player.stopVideo()

有关更多详细信息，请参见此处：http ://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

score 4 · Accepted Answer

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

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

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

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

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

score 4 · Accepted Answer

我想分享一个我使用 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。希望有人会发现这也很有用。

score 2 · Accepted Answer

只需删除 iframe 的 src

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

score 1 · Accepted Answer

Rob W 的回答帮助我弄清楚了如何在隐藏滑块时在 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>

请注意，这适用于本地主机，并且正如 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上查看

score 1 · Accepted Answer

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

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

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

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

我希望它会帮助你。

score 0 · Accepted Answer

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

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

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

当我需要暂停视频时，我只需运行以下命令：

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

希望有帮助！

score 0 · Accepted Answer

一个更简洁、优雅和安全的答案：在视频 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确保为方法的参数指定视频 URL，targetOrigin以确保您的消息不会发送给任何非预期的收件人。

score 0 · Accepted Answer

这对我来说很适合 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();

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

14 回答 14

Related

Reference