016*_*Jon 84 javascript youtube-api youtube-javascript-api
我有一个隐藏的div包含一个YouTube视频<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 -->
Rob*_*b W 178
实现此行为的最简单方法是在必要时调用pauseVideo和playVideo方法.受到我之前回答的结果的启发,我编写了一个无插件函数来实现所需的行为.
唯一的调整:
toggleVideo?enablejsapi=1到YouTube的网址,以启用该功能演示: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>
Dre*_*ewT 23
这是一个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方法的模式div本身(#video-div),以及具有视频url的iframe(#video-iframe),如src =""并且后缀为enablejsapi = 1 ？它可以对播放器进行编程控制(例如.
有关html的更多信息,请参阅RobW的回答.
qua*_*ian 15
这是一个简单的jQuery片段,可以根据RobW和DrewT的答案暂停页面上的所有视频:
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
小智 9
嘿,一个简单的方法是简单地将视频的src设置为空,以便视频在隐藏时消失,然后在您点击打开视频的链接时将src设置回您想要的视频.只需将一个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>
由于您需要?enablejsapi=true在使用其他答案中提到的playVideo/ pauseVideo命令之前在iframe的src中进行设置,因此通过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那么div中带有"video"类的所有iframe都会enablejsapi=true添加到它们的源中,这允许playVideo/pauseVideo命令对它们起作用.
(nb.这个例子使用jQuery来设置那一行var iframes,但如果你不使用jQuery,那么一般的方法应该和纯Javascript一样好用).
我想分享一个使用 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。希望有人会发现这也很有用。
您可以通过stopVideo()在隐藏div之前调用YouTube播放器实例上的方法来停止视频,例如
player.stopVideo()
有关详细信息,请参阅此处:http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
| 归档时间： |
|
| 查看次数： |
122998 次 |
| 最近记录： |