ここに問題があります: スライダーに複数の YouTube ビデオがあり、スライダーを制御するリンクがクリックされたときにビデオの再生を停止したいです。見えないのに動画が再生され続けるのは本当に面倒です。
私はこのコードを使用しました:
<div id="ytapiplayer2">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myvideo");}
var params = { allowScriptAccess: "always" };var atts = { id: "myvideo" };
swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3&playerapiid=myvideo","ytapiplayer2", "425", "270", "8", null, null, params, atts);
function play() {if (ytplayer2) {ytplayer2.playVideo();}}
function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
</script>
これは基本的に、Google の Youtube js API から直接取得したものです。1ページごとに 1 つのビデオだけに最適です。
私の問題は、同じスライダーに複数のビデオを入れたいページがあることです。ビデオは div 内に含まれ、それぞれの div で上記とまったく同じように呼び出されます。
しかし -- スライダーのナビゲート リンクをクリックしても、ビデオの再生が停止しません。:(
スクリプトが呼び出されるたびに、変数名と ID 名を一意に変更しようとしました。関数名を関数 onYouTubePlayerReady から onYouTubePlayerReady2 に変更しましたが、何も機能しません。
私は困惑しています。ハーフ?
編集して、より詳細なコード設定を表示します。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script><!--Uses Google API library-->
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->
</head>
<body>
<div id="bodyContent">
<div id="leftCol">
Content
</div><!-- #leftCol -->
<div id="middleCol">
<ul id="subNav">
<li class="category">Mini Header</li>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
</ul><!--subNav-->
</div><!-- #middleCol -->
<div id="rightCol" class="slider">
<div class="scroll">
<div class="scrollContainer">
<div id="link1" class="panel">
<div id="ytapiplayer1">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer1 = document.getElementById("myVideo1");}
var params = { allowScriptAccess: "always" };var atts = { id: "myVideo1" };
swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer1", "425", "347", "8", null, null, params, atts);
function play() {if (ytplayer1) {ytplayer1.playVideo();}}
function pause() {if (ytplayer1) {ytplayer1.pauseVideo();}}
</script>
</div><!-- #link1 -->
<div id="link2" class="panel">
<div id="ytapiplayer2">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myVideo2");}
var params = { allowScriptAccess: "always" };var atts = { id: "myVideo2" };
swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer2", "425", "347", "8", null, null, params, atts);
function play() {if (ytplayer2) {ytplayer2.playVideo();}}
function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
</script>
</div><!-- #link2 -->
<div>Video 3 set up is same as above...</div>
</div>
</div><!-- .scroll -->
</div><!-- #rightCol -->
</div><!-- #bodyContent -->
</body>