如何使用 flowplayer (jQuery) 叠加多个视频
无法使用带有 jQuery 的 flowplayer 执行多个叠加视频
我做了单个叠加视频，但当我尝试执行多个叠加时没有得到结果 我认为脚本可能有问题，我不知道 jQuery 请帮助我
我的代码是
<style>
.overlay {
background:url(white.png) no-repeat;
padding:40px;
width:576px;
display:none;
}
.close {
background:url(close.png) no-repeat;
position:absolute;
top:2px;
display:block;
right:5px;
width:35px;
height:35px;
cursor:pointer;
}
a.player {
display:block;
height:450px;
}
</style>
<script>
$(function()
{
//setup overlay actions to anchors
$("a[rel]").overlay({
// use the Apple effect for overlay
effect: 'apple',
expose: '#789',
onLoad: function(content) {
// find the player contained inside this overlay and load it
this.getOverlay().find("a.player").flowplayer(0).load();
},
onClose: function(content) {
$f().unload();
}
});
// install flowplayers
$("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
});
</script>
<body>
<p>
<a rel="overlay1" href="#">
<img src="image1.png" />
</a>
<a rel="overlay2" href="#">
<img src="image2.png"/>
</a>
<a rel="overlay3" href="#">
<img src="image3.png" />
</a>
<a rel="overlay4" href="#">
<img src="image4.png"/>
</a>
</p>
</body>
<div id="overlay1" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay2" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay3" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay4" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
Unable to do multiple overlayed videos using flowplayer with jQuery
I did single overlayed video, but i don't get result when i try to do multiple overlays
I think there may be problem with Script and i don't know jQuery please help me
My code is
<style>
.overlay {
background:url(white.png) no-repeat;
padding:40px;
width:576px;
display:none;
}
.close {
background:url(close.png) no-repeat;
position:absolute;
top:2px;
display:block;
right:5px;
width:35px;
height:35px;
cursor:pointer;
}
a.player {
display:block;
height:450px;
}
</style>
<script>
$(function()
{
//setup overlay actions to anchors
$("a[rel]").overlay({
// use the Apple effect for overlay
effect: 'apple',
expose: '#789',
onLoad: function(content) {
// find the player contained inside this overlay and load it
this.getOverlay().find("a.player").flowplayer(0).load();
},
onClose: function(content) {
$f().unload();
}
});
// install flowplayers
$("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
});
</script>
<body>
<p>
<a rel="overlay1" href="#">
<img src="image1.png" />
</a>
<a rel="overlay2" href="#">
<img src="image2.png"/>
</a>
<a rel="overlay3" href="#">
<img src="image3.png" />
</a>
<a rel="overlay4" href="#">
<img src="image4.png"/>
</a>
</p>
</body>
<div id="overlay1" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay2" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay3" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
<div id="overlay4" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
</a>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的链接中缺少 # 符号。你需要其中两个。一个是
href="#"- 您有，另一个是rel="#overlay1"- 您没有。例如：You're missing the # sign in your links. You need two of them. One being
href="#"- which you have, the other beingrel="#overlay1"- which you don't. For example:最初，我看到的最明显的事情是，您正在调用 Flowplayer 来初始化具有“玩家”类别的 A 标签上的玩家，但您的 A 标签是用“玩家”ID 而不是类别写入的。
Initially, the most obvious thing I see is that you're calling Flowplayer to initialize players on A tags with a CLASS of "player", but your A tags are written with IDs of "player" and not CLASSes.
更好的脚本：
CSS
JAVASCRIPT
HTML
Better Script for this:
CSS
JAVASCRIPT
HTML