つまり、基本的に私は1ページのWebサイトに、たくさんの隠されたVimeoビデオがあります。表示されていないときにすべてのビデオを一時停止する必要があります。
これまでのところ、特定のアンカータグをクリックすると、1つの動画を一時停止できますが、いずれかのタグをクリックして、すべての動画を一時停止できるようにしたいと思います。
いろいろ試してみましたが、JavaScriptの知識が限られているので、自分の深みが足りないと感じています。
どんなポインタでも大歓迎です。
<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>