Question

当用户点击链接链接页面时，我想停止三个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调试器调试应用程序时，我可以看到对象已定义并且函数被调用。

Answer 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>

Answer 2

此代码示例应该没有问题，并且在我的测试中它没有任何缺陷。尝试确保在页面底部添加脚本标记。这有助于确保在您调用iframe时加载iframe。同时试用http://www.youtube.com/html5，看看是否有更可靠的体验。

Answer 3

如果你的代码只是在无法找到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(); 
    }
}

Answer 4

试试这个，它工作得很好。

{p> 注意http://中缺少{/ em> 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>

Answer 5

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/

处理多个YouTube视频

5 个答案: