Javascript 处理多个youtube视频

我有三个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调试器调试应用程序时，我可以看到对象被定义，函数被调用。

我认为这样工作：

您需要Flash 8或更高版本才能查看此内容

您需要Flash 8或更高版本才能查看此内容

您需要Flash 8或更高版本才能查看此内容

var params={allowScriptAccess:“始终”}；
swfobject.embeddeswf（“http://www.youtube.com/v/F0eR1KFkt58&enablejsapi=1&playerapiid=ytplayer1“，”ytplayer1“，”425“，”365“，”8“，”空，空，参数）；
swfobject.embeddeswf（“http://www.youtube.com/v/mPTX4guU1W8&enablejsapi=1&playerapiid=ytplayer2“，”ytplayer2“，”425“，”365“，”8“，”空，空，参数）；
swfobject.embeddeswf（“http://www.youtube.com/v/E-_ONZOcScU&enablejsapi=1&playerapiid=ytplayer3“，”ytplayer3“，”425“，”365“，”8“，”空，空，参数）；
函数停止（）{
如果（ytplayer1）{
ytplayer1.stopVideo（）；
}
如果（ytplayer2）{
ytplayer2.stopVideo（）；
}
如果（ytplayer3）{
ytplayer3.stopVideo（）；
}
}​
​

此代码示例应该可以正常工作，在我的测试中，它可以正常工作。请尝试确保将脚本标记添加到页面底部。这将有助于确保在调用iframe时加载它们。还可以尝试一下，看看这是否有更可靠的体验。

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

---

试试这个，效果很好

注意

src

中缺少

http://

，因为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";

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>

var tag=document.createElement（'script'）；
tag.src=“//www.youtube.com/iframe_api”；
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var youtubePlayer1；
var youtubePlayer2；
var youtubePlayer3；
函数onyoutubeiframeapiredy（）{
youtubePlayer1=新的YT.Player（'firstPlayer'{
高度：'240'，
宽度：'320'，
videoId:'F0eR1KFkt58'，
活动：{
“onReady”：onPlayerReady1
}
});
youtubePlayer2=新的本年度玩家（“第二玩家”{
高度：'240'，
宽度：'320'，
videoId:'MPTX4GU1W8'，
活动：{
“onReady”：onPlayerReady2
}
});
youtubePlayer3=新的YT.Player（'thirdPlayer'{
高度：'240'，
宽度：'320'，
videoId:“E-_ONZOcScU”，
活动：{
“onReady”：onPlayerReady3
}
});
}
函数onPlayerReady1（事件）{
event.target.playVideo（）；
$（'a'）。单击（函数（e）{
youtubePlayer1.stopVideo（）；
e、 预防默认值（）；
});
}
函数onPlayerReady2（事件）{
event.target.playVideo（）；
$（'a'）.c
<!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>

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