2

ここに問題があります: スライダーに複数の 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>
4

3 に答える 3

5

間違ったアプローチ。特に YouTube JS API を使用している場合は、1 つのプレーヤーでタスクを達成できるのに、2 つ以上の YouTube プレーヤーを使用する必要はありません。

関連コード:

<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a>

<script type="text/javascript">
function load(id) {
    if (ytplayer) {
        ytplayer.loadVideoById(id);
    }
}
</script>

ソリューション 1 のデモ

別の方法として、複数のプレーヤーを作成し、ページ上にあるプレーヤーの数を変数に格納する方法を見つけ出すこともできます。idプレーヤーの収納には十分だと思います。idを (i) div に割り当てる ID (ii) として渡す ID と混同しないでくださいplayerapiid。

swfobject.embedSWF()objectdiv をまたはembedタグに置き換えます。そのタグには、最後のパラメーターでこのメソッドに渡す ID が割り当てられます。これは、後でプレーヤーを参照するために使用できる ID です。

ソリューション 2 のデモ

于 2011-06-22T09:54:12.570 に答える
0

各プレーヤーへの参照を配列に格納します。停止する場合は、すべてのプレーヤーが配列をループします。複数のビデオのセットアップ用にHTML/JavaScriptをもっと投稿できる場合は、より具体的な提案があるかもしれません。そうでない場合は、自分で空欄に記入してください。

// add a global array of video refs
var myVideos = [];

// some code to create the first video, similar to OP code
// ...
myVideos.push(ytplayer2);

// some code to create second video
// ...
myVideos.push(anotherVideoRef);

// some code to create third video
// ...
myVideos.push(thirdVideoRef);

// etc.

function pauseAllVideos(){
   for (var i = 0; i < myVideos.length; i++) {
      myVideos[i].pauseVideo();
   }
}

上記のように一度に1つずつではなく、ループでビデオをセットアップしたいのですが、コードの残りの部分がどのように構成されているかわからないので...

于 2011-06-20T07:52:19.090 に答える