lzh*_*idi 2 javascript youtube slider youtube-api youtube-javascript-api
问题在于:我在滑块中有多个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>
这基本上直接来自谷歌的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>
错误的做法.当您可以使用一个播放器完成任务时,为什么要使用两个或更多 YouTube播放器,特别是当您使用YouTube JS API时.
相关代码:
<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>
或者,您可以创建多个玩家并找出一些方法来存储变量中页面上有多少玩家.我认为存储id播放器就足够了.不要混淆id(i)你分配给div的id(ii)你传给的id playerapiid.
swfobject.embedSWF()将使用object或embed标记替换div ,该标记被分配了一个id,您将在最后一个参数中传递给此方法.这是您以后可以用来引用播放器的ID.