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

我有一个隐藏的div在<iframe>包含YouTubevideo。 当用户点击一个链接,这个div变得可见,用户应该能够播放video。

当用户closures面板时,video应停止播放。 我怎样才能做到这一点?

码:

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

实现此行为的最简单方法是在必要时调用pauseVideoplayVideo方法。 受到我以前答复的结果的启发,我写了一个无插件函数来实现所需的行为。

唯一的调整:

  • 我添加了一个函数, toggleVideo
  • 我已经添加了?enablejsapi=1到YouTube的URL,以启用该function

演示: 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> 

下面是一个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),以及具有src =“”videourl并具有后缀enablejsapi = 1的iframe(#video-iframe) 它可以对播放器进行编程控制(例如,

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

下面是一个简单的jQuery代码片断,基于RobW和DrewT的答案来暂停页面上的所有video:

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

嘿一个简单的方法是简单地将video的src设置为空,以便video在隐藏的时候会被剥夺,然后当您点击打开video的链接时,将src设置回您想要的video。只需将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> 

由于您需要在iframe的src中设置?enablejsapi=true ,所以在使用其他答案中提到的playVideo / pauseVideo命令之前,可能需要通过Javascript以编程方式添加此代码(特别是如果您希望此行为应用于刚刚剪切并粘贴YouTubeembedded代码的其他用户embedded的video)。 在这种情况下,像这样的东西可能是有用的:

 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上调用此enablejsapi=true ,那么div中的所有iframe与“video”类都将具有enablejsapi=true添加到它们的源代码,这允许playVideo / pauseVideo命令对它们进行处理。

(nb。这个例子使用jQuery来设置var iframes那一行,但是如果你不使用jQuery,一般的方法应该和纯Javascript一样工作)。

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

 player.stopVideo() 

有关详情,请参阅此处: http : //code.google.com/apis/youtube/js_api_reference.html#Playback_controls

罗布韦的方式对我很好。 对于使用jQuery的人来说,这是我最终使用的简化版本:

 var iframe = $(video_player_div).find('iframe'); var src = $(iframe).attr('src'); $(iframe).attr('src', '').attr('src', src); 

在这个例子中,“video_player”是包含iframe的父div。

我想分享一个我使用jQuery的解决scheme,如果您在单个页面上embedded了多个YouTubevideo,则可以使用该解决scheme。 就我而言,我已经为每个video定义了一个模式popup窗口,如下所示:

 <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代表video的唯一ID。 然后,以下function停止video:

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

我喜欢这种方法,因为它可以使video在您离开的地方暂停,以防您想要返回并在稍后继续观看。 它适用于我,因为它正在寻找具有特定ID的video模式内的iframe。 不需要特殊的YouTube元素ID。 希望有人也会觉得这很有用。

只要删除iframe的src

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

Rob W的答案帮助我找出如何在隐藏滑块时通过iframe暂停video。 然而,我需要一些修改,才能使其工作。 这是我的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> 

注意到这可以在localhost上运行 ,Rob W也提到“ enablejsapi = 1 ”被添加到videourl的末尾。

以下是我的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

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

我有一个方法,我形成一个HTMLstring加载到UIWebView中:

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

您可以忽略preparedHTMLstring中的样式。 重要的方面是:

  • 使用API​​创build“YT.player”对象。 有一次,我只有在iFrame标签中的video,这阻止了我以后用JS引用“播放器”对象。
  • 我在网上看到了一些例子,其中第一个脚本标签(带有iframe_api src标签的脚本标签)被省略了,但是我确实需要这个脚本才能正常工作。
  • 在API脚本的开头创build“player”variables。 我也看到一些省略了这一行的例子。
  • 将id标记添加到要在API脚本中引用的iFrame。 我几乎忘了那一部分。
  • 将“enablejsapi = 1”添加到iFrame src标记的末尾。 这让我挂了一段时间,因为我最初把它作为iFrame标签的一个属性,它不起作用/不适合我。

当我需要暂停video时,我只是运行这个:

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

希望有所帮助!

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();

这种方法需要jQuery。 首先,select你的iframe:

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

现在你select这个iframe的button播放/暂停,然后点击它

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

我希望这会帮助你。

一个更简洁,优雅和安全的答案:在videoURL的末尾添加“?enablejsapi = 1”,然后构build和表示暂停命令的普通对象:

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

使用Window.postMessage方法将生成的JSONstring发送到embedded式video文档:

 // |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参数指定了videoURL,以确保您的邮件不会被发送到任何意外的收件人。