Demo for solution 1

Question

这是问题所在：我在滑块中有多个YouTube视频，并且我希望在单击控制滑块的链接时停止播放视频。当您无法看到视频时，让视频继续播放真的很烦人。

我使用了这段代码：

<div id="ytapiplayer2">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
    function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myvideo");}
    var params = { allowScriptAccess: "always" };var atts = { id: "myvideo" };
    swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3&playerapiid=myvideo","ytapiplayer2", "425", "270", "8", null, null, params, atts);
    function play() {if (ytplayer2) {ytplayer2.playVideo();}}
    function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
</script>

这基本上直接来自Google的Youtube js api。1每页只有一个视频效果很好。

我的问题是我有一些页面，我希望在同一个滑块中有多个视频。视频包含在div中，并在每个相应的div中完全按照上面所示进行调用。

但是 - 当点击滑块的导航链接时，视频现在不会停止播放。：（

每次调用脚本时，我都试图将变量和id名称更改为唯一。我甚至将函数名称从函数onYouTubePlayerReady更改为onYouTubePlayerReady2 ...但没有任何作用。

我很难过。 HALP？

编辑以显示更详细的代码设置：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script><!--Uses Google API library-->
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->
</head>
<body>
<div id="bodyContent">
    <div id="leftCol">
        Content
    </div><!-- #leftCol -->
        <div id="middleCol">
        <ul id="subNav">
                 <li class="category">Mini Header</li>
                 <li><a href="#link1">Link 1</a></li>
                 <li><a href="#link2">Link 2</a></li>
                 <li><a href="#link3">Link 3</a></li>
        </ul><!--subNav-->
                </div><!-- #middleCol -->
                <div id="rightCol" class="slider">
                    <div class="scroll">
                        <div class="scrollContainer">                  
                            <div id="link1" class="panel">
                            <div id="ytapiplayer1">
                                You need Flash player 8+ and JavaScript enabled to view this video.
                                </div>
                                <script type="text/javascript">
                                function onYouTubePlayerReady(playerId) {ytplayer1 = document.getElementById("myVideo1");}
                                var params = { allowScriptAccess: "always" };var atts = { id: "myVideo1" };
                                swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer1", "425", "347", "8", null, null, params, atts);
                                function play() {if (ytplayer1) {ytplayer1.playVideo();}}
                                function pause() {if (ytplayer1) {ytplayer1.pauseVideo();}}
                                </script>
                            </div><!-- #link1 -->
                            <div id="link2" class="panel">
                            <div id="ytapiplayer2">
                                You need Flash player 8+ and JavaScript enabled to view this video.
                                </div>
                                <script type="text/javascript">
                                function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myVideo2");}
                                var params = { allowScriptAccess: "always" };var atts = { id: "myVideo2" };
                                swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer2", "425", "347", "8", null, null, params, atts);
                                function play() {if (ytplayer2) {ytplayer2.playVideo();}}
                                function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
                                </script>
                            </div><!-- #link2 -->
                    <div>Video 3 set up is same as above...</div>
                        </div>
                    </div><!-- .scroll -->
                </div><!-- #rightCol -->
</div><!-- #bodyContent -->
</body>

Answer 1

错误的做法。当您使用一个播放器完成任务时，为什么要使用两个或更多 YouTube播放器，特别是当您使用YouTube JS API时。

Demo for solution 1

或者，您可以创建多个玩家并找出一些方法来存储变量中页面上有多少玩家。我认为存储播放器的id就足够了。不要将id与（i）您分配给div的ID（ii）传递给playerapiid的ID混淆。

swfobject.embedSWF()会使用object或embed标记替换div，该标记会分配一个您在最后一个参数中传递给此方法的ID。这是您以后可以用来引用播放器的ID。

Demo for solution 2

Answer 2

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>                
    var player1st;
    var player2nd;
    function onYouTubePlayerAPIReady() { 
    player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}}); 
    player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
        }              
    //function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }                
    function onPlayerStateChange(event) {
    alert(event.target.getPlayerState());        
    }        
</script>                        
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&amp;enablejsapi=1"></iframe><br>
<a href="javascript: void(0)" onclick="player1st.playVideo(); return false">play1st</a><br>
<a href="javascript: void(0)" onclick="player1st.pauseVideo(); return false">pause1st</a><br>
<a href="javascript: void(0)" onclick="player1st.stopVideo(); return false">stop1st</a>                
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&amp;enablejsapi=1"></iframe><br>    
<a href="javascript: void(0)" onclick="player2nd.playVideo(); return false">play2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.pauseVideo(); return false">pause2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.stopVideo(); return false">stop2nd</a>

Answer 3

将对每个播放器的引用存储在一个数组中，然后当你想要停止它们时，所有这些都在数组中循环。如果您可以为多个视频设置发布更多HTML / JavaScript，我可能会提出更具体的建议，否则请自行填写空白：

// add a global array of video refs
var myVideos = [];

// some code to create the first video, similar to OP code
// ...
myVideos.push(ytplayer2);

// some code to create second video
// ...
myVideos.push(anotherVideoRef);

// some code to create third video
// ...
myVideos.push(thirdVideoRef);

// etc.

function pauseAllVideos(){
   for (var i = 0; i < myVideos.length; i++) {
      myVideos[i].pauseVideo();
   }
}

我更喜欢在循环中设置视频，而不是像上面那样一次设置视频，但我不知道代码的其余部分是如何构建的，所以......

如何使用Youtube JS api控制多个Youtube视频的播放？

3 个答案:

Demo for solution 1

Demo for solution 2