当我在页面中播放视频youtube时,如何暂停所有视频

时间:2014-02-24 06:53:48

标签: iframe video youtube

我使用iframe API Youtube在我的网站上嵌入了很多视频。我想点击播放视频时暂停页面中的所有视频。这是我的代码,它的工作原理但它看起来很复杂。如何简单。

<doctype html>
<html>
<head>
<title>Multiple YouTube Players</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<iframe id='player1' width="400" height="225" src="http://www.youtube.com/embed/H0GxG24qpYQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe id='player2' width="400" height="225" src="http://www.youtube.com/embed/Dl_-iGvqZWA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe id='player3' width="400" height="225" src="http://www.youtube.com/embed/Dl_-iGvqZWA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe id='player4' width="400" height="225" src="http://www.youtube.com/embed/H0GxG24qpYQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe id='player5' width="400" height="225" src="http://www.youtube.com/embed/Dl_-iGvqZWA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script type='text/javascript'>
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
        events: {
          'onStateChange': function(e) { if(e.data == YT.PlayerState.PLAYING) {player2.stopVideo();player3.stopVideo();player4.stopVideo();player5.stopVideo();} }
        }
    });
    player2 = new YT.Player('player2', {
        events: {
          'onStateChange': function(e) { if(e.data == YT.PlayerState.PLAYING) {player1.stopVideo();player3.stopVideo();player4.stopVideo();player5.stopVideo();} }
        }
    });
    player3 = new YT.Player('player3', {
        events: {
          'onStateChange': function(e) { if(e.data == YT.PlayerState.PLAYING) {player2.stopVideo();player1.stopVideo();player4.stopVideo();player5.stopVideo();} }
        }
    });
    player4 = new YT.Player('player4', {
        events: {
          'onStateChange': function(e) { if(e.data == YT.PlayerState.PLAYING) {player2.stopVideo();player3.stopVideo();player1.stopVideo();player5.stopVideo();} }
        }
    });
    player5 = new YT.Player('player5', {
        events: {
          'onStateChange': function(e) { if(e.data == YT.PlayerState.PLAYING){player2.stopVideo();player3.stopVideo();player4.stopVideo();player1.stopVideo();} }
        }
    });
}
</script>
<script type='text/javascript' src='https://www.youtube.com/iframe_api'></script></body>
</html>

0 个答案:

没有答案