我已经使用iframe功能嵌入视频,而我正在通过JavaScript隐藏/显示内容和视频。
我有 一个 问题。当我在第一个视频上按下播放,然后在不停止第一个视频的情况下点击下一个视频时,第一个视频继续播放。
在显示新内容时,如何停止“背景”中的视频?
$(function(){
$("#link1").click(show1);
});
function show1(){
$("#pic1").fadeIn();
$("#pic2").hide();
}
我只是使用这个简单的JavaScript函数,其中“pic1”和“pic2”id是div的id,视频是嵌入的。
我似乎无法使其发挥作用。我试图将删除,但如果你愿意,你再也看不到视频了。
答案 0 :(得分:27)
这是YouTube播放器API的实现,无需加载其他文件。要完成这项工作,您必须使用<iframe>
为src
的所有?enablejsapi=1
属性添加后缀。
示例(为了便于阅读,我将代码分解了几行,您可以安全地省略换行符):
<div id="pic3">
<iframe width="640" height="390"
src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
</div>
<div id="tS2" class="jThumbnailScroller">
.. Removed your code for readability....
<a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a>
....
JavaScript + jQuery代码:
$(function() {
/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
* if possible. Other videos will be paused*/
function playVideoAndPauseOthers(frame) {
$('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
var func = this === frame ? 'playVideo' : 'pauseVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}
$('#tS2 a[href^="#vid"]').click(function() {
var frameId = /#vid(\d+)/.exec($(this).attr('href'));
if (frameId !== null) {
frameId = frameId[1]; // Get frameId
playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]);
}
});
});