4

当用户单击链接页面时，我想停止三个 youtube 视频。这是我的代码

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

我认为以这种方式有效：

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 回答
1

此代码示例应该可以正常工作，并且在我的测试中它可以正常工作。尝试确保将脚本标记添加到页面底部。这将有助于确保在您调用 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 回答
0

试试这个，效果很好。

http://中缺少注释src，因为stackoverflow在使用 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 回答
0

Mohamed Navas 的回答（第一个回答）帮助我想出了这个：

<br>
    <button id="pause">Pause</button>
<br>
<br>

<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: 'qV9HxRU4ozY',
            events: {
                'onReady': onPlayerReady
            }
        });
        youtubePlayer2 = new YT.Player('secondPlayer', {
            height: '240',
            width: '320',
            videoId: 'nBRpWJ0QUH0',
            events: {
                'onReady': onPlayerReady
            }
        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {
            height: '240',
            width: '320',
            videoId: 'E-_ONZOcScU',
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        document.getElementById('pause').onclick = function() {
            youtubePlayer1.pauseVideo();
            youtubePlayer2.pauseVideo();
            youtubePlayer3.pauseVideo();
            e.preventDefault();
        };
    };


</script>

https://jsfiddle.net/tonhaoln/ancz2vkn/

于 2015-07-09T04:23:27.897 回答