Javascript 暂停来自多个a标记的多个Vimeo嵌入
所以基本上我有一个单页网站,里面有一大堆隐藏的Vimeo视频。我需要所有的视频暂停时,不显示 到目前为止,我可以在点击一个特定的锚定标签时暂停一个视频,但我想通过点击任何一个标签来暂停所有视频 我尝试了很多不同的东西,但由于我对JavaScript的知识有限,我觉得我已经超出了我的能力范围 任何指点都将不胜感激Javascript 暂停来自多个a标记的多个Vimeo嵌入,javascript,vimeo,Javascript,Vimeo,所以基本上我有一个单页网站,里面有一大堆隐藏的Vimeo视频。我需要所有的视频暂停时,不显示 到目前为止,我可以在点击一个特定的锚定标签时暂停一个视频,但我想通过点击任何一个标签来暂停所有视频 我尝试了很多不同的东西,但由于我对JavaScript的知识有限,我觉得我已经超出了我的能力范围 任何指点都将不胜感激 <script> function showonlyone(thechosenone) { var newboxes = document.getElementsByTagN
<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}}}}
</script>
<div name="newboxes" id="newboxes0" style="display: block;">
<iframe id="player" src="http://player.vimeo.com/video/53407474?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes0" style="display: none;">
<iframe id="player" src="http://player.vimeo.com/video/53855813?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes0" style="display: none;">
<iframe id="player" src="http://player.vimeo.com/video/19780095?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a name="button" id="button1" href="javascript:showonlyone('newboxes0');"><span></span></a>
<a name="button" id="button2" href="javascript:showonlyone('newboxes1');"><span></span></a>
<a name="button" id="button3" href="javascript:showonlyone('newboxes2');"><span></span></a>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
function ready(player_id) {
var player = $f(player_id);
pauseButton = document.getElementById('button1');
pauseButton.addEventListener('click', function() {
player.api('pause');
});}
window.addEventListener('load', function() {
$f(document.getElementById('player')).addEvent('ready', ready);
});
</script>
功能仅显示一个(氯乙烯酮){
var newbox=document.getElementsByTagName(“div”);
对于(var x=0;x我在后面注意到的一件事是,您有多个相同的ID。ID应该是唯一的。请查看
所以我重新编写了你的html,就像这样
<div name="newboxes" id="newboxes0" style="display: block;">
<iframe id="player0" src="http://player.vimeo.com/video/53407474?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes1" style="display: none;">
<iframe id="player1" src="http://player.vimeo.com/video/53855813?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes2" style="display: none;">
<iframe id="player2" src="http://player.vimeo.com/video/19780095?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a name="button" id="button0" href="javascript:showonlyone('newboxes0');"><span>Button1</span></a>
<a name="button" id="button1" href="javascript:showonlyone('newboxes1');"><span>Button2</span></a>
<a name="button" id="button2" href="javascript:showonlyone('newboxes2');"><span>Button3</span></a>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByName("newboxes"), x=0;
for(var x = 0; x < newboxes.length; x++) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('play');
} else {
newboxes[x].style.display = 'none';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('pause');
}
}
}
然后我更新了你的JavaScript,使其看起来像这样
<div name="newboxes" id="newboxes0" style="display: block;">
<iframe id="player0" src="http://player.vimeo.com/video/53407474?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes1" style="display: none;">
<iframe id="player1" src="http://player.vimeo.com/video/53855813?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes2" style="display: none;">
<iframe id="player2" src="http://player.vimeo.com/video/19780095?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a name="button" id="button0" href="javascript:showonlyone('newboxes0');"><span>Button1</span></a>
<a name="button" id="button1" href="javascript:showonlyone('newboxes1');"><span>Button2</span></a>
<a name="button" id="button2" href="javascript:showonlyone('newboxes2');"><span>Button3</span></a>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByName("newboxes"), x=0;
for(var x = 0; x < newboxes.length; x++) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('play');
} else {
newboxes[x].style.display = 'none';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('pause');
}
}
}
功能仅显示一个(氯乙烯酮){
var newboxes=document.getElementsByName(“newboxes”),x=0;
对于(变量x=0;x
希望这有帮助!我在后面注意到的一点是,您有多个相同的ID。ID应该是唯一的。请查看
所以我重新编写了你的html,就像这样
<div name="newboxes" id="newboxes0" style="display: block;">
<iframe id="player0" src="http://player.vimeo.com/video/53407474?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes1" style="display: none;">
<iframe id="player1" src="http://player.vimeo.com/video/53855813?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes2" style="display: none;">
<iframe id="player2" src="http://player.vimeo.com/video/19780095?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a name="button" id="button0" href="javascript:showonlyone('newboxes0');"><span>Button1</span></a>
<a name="button" id="button1" href="javascript:showonlyone('newboxes1');"><span>Button2</span></a>
<a name="button" id="button2" href="javascript:showonlyone('newboxes2');"><span>Button3</span></a>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByName("newboxes"), x=0;
for(var x = 0; x < newboxes.length; x++) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('play');
} else {
newboxes[x].style.display = 'none';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('pause');
}
}
}
然后我更新了你的JavaScript,使其看起来像这样
<div name="newboxes" id="newboxes0" style="display: block;">
<iframe id="player0" src="http://player.vimeo.com/video/53407474?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes1" style="display: none;">
<iframe id="player1" src="http://player.vimeo.com/video/53855813?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div name="newboxes" id="newboxes2" style="display: none;">
<iframe id="player2" src="http://player.vimeo.com/video/19780095?api=1&player_id=player" width="800" height="450" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<a name="button" id="button0" href="javascript:showonlyone('newboxes0');"><span>Button1</span></a>
<a name="button" id="button1" href="javascript:showonlyone('newboxes1');"><span>Button2</span></a>
<a name="button" id="button2" href="javascript:showonlyone('newboxes2');"><span>Button3</span></a>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByName("newboxes"), x=0;
for(var x = 0; x < newboxes.length; x++) {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('play');
} else {
newboxes[x].style.display = 'none';
var strPlayerID = newboxes[x].id.replace("newboxes", "player");
var iframe = $('#'+strPlayerID)[0], player = $f(iframe);
player.api('pause');
}
}
}
功能仅显示一个(氯乙烯酮){
var newboxes=document.getElementsByName(“newboxes”),x=0;
对于(变量x=0;x
希望这有帮助!非常有效!谢谢你的帮助。非常有效!谢谢你的帮助。