link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
无邪的大熊猫 · scale() - CSS：层叠样式表 | MDN· 7 月前 · |
|
|
深沉的牙膏 · iOS 获取当前时间毫秒值 ...· 1 年前 · |
|
|
痴情的墨镜 · js刷新整个页面-CSDN博客· 1 年前 · |
|
|
豪气的马克杯 · StateMachine 的简单使用 - 简书· 1 年前 · |
|
|
性感的镜子 · 如何在 matplotlib 中旋转 ...· 2 年前 · |
我有一个在
<iframe>
中包含YouTube视频的隐藏div。当用户点击一个链接时，这个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="left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;;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
</div><!--end of popupVid -->
9 个回答
高票数
最新
david
回答于2011-12-29 21:14
得票数
5
您可以通过调用YouTube player实例上的
stopVideo()
方法来停止视频，然后再隐藏div。
player.stopVideo()有关更多详细信息，请参阅此处： http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
Paula
回答于2012-08-18 03:21
得票数
9
一个简单的方法是简单地将视频的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>
<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>
Community
修改于2017-05-23 20:26
得票数
6
由于在使用
other answers
中提到的
playVideo
/
pauseVideo
命令之前，您需要在iframe的src中设置
?enablejsapi=true
，因此通过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) ? "?" : "&";
iframes[i].src += prefix + "enablejsapi=true";
}
如果你在
document.ready
上调用它，那么在一个类为“...if”的div中的所有iframe都会将
enablejsapi=true
添加到它们的源代码中，这样playVideo / pauseVideo命令就可以对它们起作用了。
(注意：本例对设置
var iframes
的那一行代码使用了jQuery，但如果您不使用jQuery，一般的方法应该也适用于纯Javascript )。
skribbz14
回答于2015-05-05 00:38
得票数
4
RobW的方法对我很有效。对于使用jQuery的人，这里有一个我最终使用的简化版本：
var iframe = $(video_player_div).find('iframe');
var src = $(iframe).attr('src');
$(iframe).attr('src', '').attr('src', src);在本例中，"video_player“是包含iframe的父div。
Poldon
回答于2015-08-14 04:30
得票数
4
我想分享我想出的一个解决方案，如果你在一个页面上嵌入了多个YouTube视频，那么这个解决方案就可以使用jQuery。在我的例子中，我为每个视频定义了一个模式弹出窗口，如下所示：
<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。希望有人会发现这也很有用。
quartarian
修改于2015-10-24 06:30
得票数
15
这是一个简单的jQuery片段，可以根据RobW和DrewT的回答暂停页面上的所有视频：
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
rakesh kejriwal
回答于2016-12-19 20:19
得票数
2
只需删除iframe的src
$('button.close').click(function(){
$('iframe').attr('src','');;
});
Giacomo1968
修改于2017-10-11 22:04
得票数
1
这种方法需要jQuery。首先，选择您的iframe：
var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.现在您选择按钮播放/暂停此iframe并点击它
$('button.ytp-play-button.ytp-button', yourIframe).click();我希望它能对你有所帮助。
推荐文章
|
|
无邪的大熊猫 · scale() - CSS：层叠样式表 | MDN 7 月前 |
|
|
痴情的墨镜 · js刷新整个页面-CSDN博客 1 年前 |
|
|
豪气的马克杯 · StateMachine 的简单使用 - 简书 1 年前 |