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

发布于 2024-11-16 08:09:01 字数 4730 浏览 3 评论 0原文

问题是这样的：我的滑块中有多个 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>

原文

Here's the problem:
I have multiple youtube videos in a slider, and I want the videos to stop playing when a link that controls the slider is clicked. It's really annoying to have the videos just keep playing when you can't see it.

I used this code:

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

Which is basically directly from Google's Youtube js api stuff.1 It works GREAT for just ONE video, per page.

My problem is I have some pages where I want to have multiple videos in the same slider. Videos are contained within divs, and called exactly as shown above in each respective div.

BUT -- The videos don't stop playing back now when navigating links for the slider are clicked. :(

I have tried to change the variable and id names to be unique each time the script is called. I have even changed the function name from function onYouTubePlayerReady to onYouTubePlayerReady2 ... but nothing works.

I'm stumped. Halp?

Edit to show more detailed code set up:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一身仙ぐ女味 2024-11-23 08:09:01

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

解决方案 1 的演示

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

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

解决方案 2 的演示

Wrong approach. Why use two or more YouTube players when you can accomplish the task with one player, specially when you're using YouTube JS API.

Relevant code:

<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<a href="#" onclick="load('hCarSDT7cSQ'); return false;">Video 1</a>
<a href="#" onclick="load('67aIIRv-dYU'); return false;">Video 2</a>

<script type="text/javascript">
function load(id) {
    if (ytplayer) {
        ytplayer.loadVideoById(id);
    }
}
</script>

Demo for solution 1

Alternately you can create multiple players and figure out some way of storing how many players you have on the page in a variable. I think it is sufficient to store the id of the player. Do not confuse the id with (i) the id you assign to the div (ii) the id you pass as playerapiid.

swfobject.embedSWF() will replace the div with either an object or embed tag, that tag is assigned an id that you pass to this method in the last parameter. This is the id that you can later use to reference the player(s).

Demo for solution 2

回复收藏 0 原文

╰◇生如夏花灿烂 2024-11-23 08:09:01

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

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

回复收藏 0 原文

冰火雁神 2024-11-23 08:09:01

将每个玩家的引用存储在一个数组中，然后当您想要停止它们时，循环遍历该数组。如果您可以针对多个视频设置发布更多 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();
   }
}

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

Store the references to each player in an array, then when you want to stop them all loop through the array. If you could post more of your HTML/JavaScript for the multiple video setup I might have a more specific suggestion, otherwise fill in the blanks yourself:

// 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();
   }
}

I would prefer to setup the videos in a loop, rather than one at a time like I did above, but I don't know how the rest of your code is structured, so...

回复收藏 0 原文

~没有更多了~