iFrameでYouTube動画を一時停止する外部ボタンを使用する

Question

このスクリプトを使用して、タブを変更するときにYouTube動画を停止します。 ただし、最初の動画でのみ動作します。私は何を取りこぼしたか？ また、動画をクリックして停止する方法もあります。

よろしく、マイケル

スクリプトは、私が使用：

<!-- 
@Author: Naveen 
--> 
<iframe id="youtube_player" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe> 
<br /> 
<br /> 
<a id="stop" href="#"><strong>Stop The Video</strong></a> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$('#stop').on('click', function() { 
    //$('#popup-youtube-player').stopVideo(); 
$('#youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
}); 
</script> 

ウェブサイト：www.natashatarasova.de

Answer 1

あなたが唯一のjQueryのセレクタで選択された要素の最初と対話しています。これは、$('#youtube_player')[0]の末尾にある[0]の意味です。

あなたのサイトコードを見ると、それぞれの停止タブに対して別々のイベントハンドラを実行することがあります。

$('#stop1').on('click', function() { 
    //$('#popup-youtube-player').stopVideo(); 
$('.youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
}); 


$('#stop2').on('click', function() { 
    //$('#popup-youtube-player').stopVideo(); 
$('.youtube_player')[1].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
}); 

これをより一般的にしたいと思っているのであれば、もっと多くの作業を行う必要があります。これにはさまざまな方法があり、データ属性やクラスを追加して、タブリンクとあなたが見ている特定のプレイヤーをリンクすることができます。この（未テストコード）のような何か：

$('.stop').on('click', function() { 
    var playeref = $(this).data('playerref'); 
$('[data-playerref="'+ playerref + '"')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
}); 

そして、あなたが停止リンクとプレーヤーの両方でdata-playerref="whatever"をマッチング置く（Selecting element by data attributeを参照）

あなたではなく、直接自分でのpostMessageを送信している理由私も疑問に思いますGoogleが提供するYTPlayerのjavascriptオブジェクトを使用するよりも、ここにドキュメントを見ることができます：https://developers.google.com/youtube/iframe_api_reference

私はあなたがより信頼性が高く、コーディングが容易であると思います。 I を信じて、あなたのビデオごとにプレーヤーオブジェクトを作成し、一時停止したいものにplayer.pauseVideo()を呼び出すことができます。

編集：コードの低下はすべての動画を停止しますコード内のいくつかのドロップは以前ここにあなたのコメントをされた後、すべての動画

を停止するには：

//You will probably want to change 'li' to a more specific selector e.g. #navTab 
jQuery('li').on('click', function() { 
    jQuery('.youtube_player').each(function(index){ 
     thisPlayer = jQuery('.youtube_player')[index]; 
     thisPlayer.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
    }); 
}); 

私はこれをテストしたのだが、意志あなたのサイトで作業してください。おそらく、（ 'li'）セレクターをより具体的なものに置き換えたいと思うでしょう。

私はあなたのサイトがそれを使用していることにお気づきのように、これをnoConflictスタイル（ '$'なし）で書きました。これはあなたのスクリプトがうまくいかなかったもう一つの理由かもしれません。