4

ユーザーがページへのリンクをクリックしたときに停止したいYouTubeビデオが3つあります。これは私のコードです

var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var youtubePlayer1;
    var youtubePlayer2;
    var youtubePlayer3;
    function onYouTubeIframeAPIReady() {
        youtubePlayer1 = new YT.Player('firstPlayer', {

        });
        youtubePlayer2 = new YT.Player('secondPlayer', {

        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {

        });
    }

    function stopVideo() {
        if (youtubePlayer1 != null) {
            youtubePlayer1.stopVideo();
        }
        if (youtubePlayer2 != null) {
            youtubePlayer2.stopVideo();
        }
        if (youtubePlayer3 != null) {
            youtubePlayer3.stopVideo();
        }
    }

これはhtmlコードです

<div id="blog">
                                    <!--///////////// UN ORDERED LIST /////////////-->
                                    <ul>
                                        <!--///////////// LIST /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בהרקדה חסידית...</strong></h3>
                                            <br />
                                            <iframe id="firstPlayer" width="800" height="485" src="http://www.youtube.com/embed/F0eR1KFkt58"
                                                style="border:0" ></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                        <!--///////////// SECOND IMAGE /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בהרקדה ישראלית מוטרפת...</strong></h3>
                                            <br />
                                            <iframe id="secondPlayer" width="800" height="485" src="http://www.youtube.com/embed/mPTX4guU1W8"
                                                style="border:0" ></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                        <!--///////////// THIRD IMAGE /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בואי בשלום...</strong></h3>
                                            <br />
                                            <iframe id="thirdPlayer" width="800" height="485" src="http://www.youtube.com/embed/E-_ONZOcScU"
                                                style="border:0"></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                    </ul>
                                </div>

ユーザーがリンクをクリックすると、すべてのプレーヤーを循環して停止する stopVideo 関数が呼び出されます。

何らかの理由で、youtubePlayer2 オブジェクトでのみ動作させることができます。ここで何が間違っていますか?

言及するのを忘れていましたが、chrome デバッガーを使用してアプリをデバッグすると、オブジェクトが定義され、関数が呼び出されていることがわかります。

4

5 に答える 5

1

このコード サンプルは問題なく動作するはずであり、私のテストでは問題なく動作しました。script タグがページの下部に追加されていることを確認してください。これにより、iframe を呼び出すまでに iframe が確実に読み込まれます。また、 http://www.youtube.com/html5を試して、より信頼できるエクスペリエンスがあるかどうかを確認してください。

于 2012-10-29T15:34:57.627 に答える
1

youtubeplayer が見つからないときにコードが実行される場合、if ステートメントの必要性はわかりませんが、else ステートメントを追加して同様の問題を解決したことがあります。上記は時々しか起こっていませんでした。

少しコピーして貼り付けるだけです。

function stopVideo() {
    if (youtubePlayer1 != null) {
        youtubePlayer1.stopVideo();
    }
    else {
    youtubePlayer1.stopVideo(); 
    }
    if (youtubePlayer2 != null) {
        youtubePlayer2.stopVideo();
    }
    else {
    youtubePlayer2.stopVideo(); 
    }
    if (youtubePlayer3 != null) {
        youtubePlayer3.stopVideo();
    }
    else {
    youtubePlayer3.stopVideo(); 
    }
}
于 2012-11-02T23:11:46.707 に答える
1

私はこのように動作すると思います：

http://jsfiddle.net/ZLMF8/3/

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script></head>

<body>

<div id="ytplayer1">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<div id="ytplayer2">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<div id="ytplayer3">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };

swfobject.embedSWF("http://www.youtube.com/v/F0eR1KFkt58&enablejsapi=1&playerapiid=ytplayer1", "ytplayer1", "425", "365", "8", null, null, params);

swfobject.embedSWF("http://www.youtube.com/v/mPTX4guU1W8&enablejsapi=1&playerapiid=ytplayer2", "ytplayer2", "425", "365", "8", null, null, params);

swfobject.embedSWF("http://www.youtube.com/v/E-_ONZOcScU&enablejsapi=1&playerapiid=ytplayer3", "ytplayer3", "425", "365", "8", null, null, params);

function stop() {

  if (ytplayer1) {

    ytplayer1.stopVideo();

  }
  if (ytplayer2) {

    ytplayer2.stopVideo();

  }
  if (ytplayer3) {

    ytplayer3.stopVideo();

  }

}​

</script>

<a href="javascript:void(0);" onclick="stop();">Stop</a>


</body>

</html>​
于 2012-10-24T18:46:30.410 に答える
0

これを試してください、うまくいきました。

src での投稿中にstackoverflowがエラーを表示するため、 にメモhttp://がありません。それを修正してテストします。src

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
tag.src = "//www.youtube.com/iframe_api";

完全な作業コード

<!DOCTYPE HTML>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<body>
<div id="firstPlayer"></div>
<div id="secondPlayer"></div>
<div id="thirdPlayer"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var youtubePlayer1;
var youtubePlayer2;
var youtubePlayer3;

function onYouTubeIframeAPIReady() {
        youtubePlayer1 = new YT.Player('firstPlayer',{
            height: '240',
            width: '320',
            videoId: 'F0eR1KFkt58',
            events: {
                'onReady': onPlayerReady1
            }
        });
        youtubePlayer2 = new YT.Player('secondPlayer', {
            height: '240',
            width: '320',
            videoId: 'mPTX4guU1W8',
            events: {
                'onReady': onPlayerReady2
            }
        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {
            height: '240',
            width: '320',
            videoId: 'E-_ONZOcScU',
            events: {
                'onReady': onPlayerReady3
            }
        });
    }
function onPlayerReady1(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer1.stopVideo();
            e.preventDefault();
        });
    }
function onPlayerReady2(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer2.stopVideo();
            e.preventDefault();
        });
    }
function onPlayerReady3(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer3.stopVideo();
            e.preventDefault();
        });
    }
</script>
    <a>Stop</a>
</body>
</html>
于 2012-11-04T05:19:21.607 に答える