Flowplayer 控件:自动隐藏和自动播放
我无法让我的播放器自动启动或自动隐藏控件。我相信我已经正确设置了它,但它不起作用。这是我的整个脚本标记:
<script type="text/javascript">
// wait for the DOM to load using jQuery
$(function() {
// setup player normally
$f("videoPlayer", "videos/flowplayer-3.2.7.swf", {
// clip properties common to all playlist entries
clip: {
autoPlay: false,
autoBuffering: true,
baseUrl: 'http://thepartysource.com/videos/',
subTitle: '',
time: ''
},
// our playlist
playlist: [
{
url: 'DRINK DIFFERENTLY - 480x272.m4v',
autoPlay: true
},
{
url: 'DRINK DIFFERENTLY - 480x272.m4v'
}
],
// show playlist buttons in controlbar
plugins: {
controls: {
playlist: true,
// display properties such as size, location and opacity
top: 20,
left: 0,
bottom: 0,
opacity: 0.95,
// styling properties (will be applied to all plugins)
background: '#000', // url(/my/custom/controls.png) no-repeat 3px 6px',
backgroundGradient: 'low',
// controlbar specific settings
timeColor: '#980118',
all: false,
play: false,
scrubber: true,
fullscreen: true,
// tooltips (since 3.1)
tooltips: {
buttons: false,
//fullscreen: 'Enter fullscreen mode'
},
autoHide: {
enabled: true,
// always enable
fullsccreenOnly: false,
// make it hide faster
hideDelay: 1000,
mouseOutDelay: 500
}
}
}
});
/*
here comes the magic plugin. It uses first div.clips element as the
root for as playlist entries. loop parameter makes clips play
from the beginning to the end.
*/
$f("videoPlayer").playlist("div.clips:first", {loop:true});
});
</script>
这是 HTML 区域:
<div class="box-movie">
<!-- the player using splash image -->
<a class="player plain" id="videoPlayer">
<img src="images/play_text_large.png" />
</a>
<div class="clips" style="margin-top:15px;">
<!-- single playlist entry as an "template" -->
<a href="${url}">
<!--${title}--> <!--<span>${subTitle}</span>-->
<!--<em>${time}</em>-->
</a>
</div>
<!-- let rest of the page float normally -->
<br clear="all"/>
</div>
编辑
我实际上发现了问题可能是什么。当它加载时,它几乎只是一个启动图像,而不是实际的播放器。您可以在 http://thepartysource.com/index_test.php 查看此内容。如果我将第二个剪辑设置为自动播放,它会在第一个剪辑完成后自动播放。
I cannot get my player to auto start or the controls to auto hide. I believe I have set this up correctly, but it is just not working. Here is my entire script tag for this:
<script type="text/javascript">
// wait for the DOM to load using jQuery
$(function() {
// setup player normally
$f("videoPlayer", "videos/flowplayer-3.2.7.swf", {
// clip properties common to all playlist entries
clip: {
autoPlay: false,
autoBuffering: true,
baseUrl: 'http://thepartysource.com/videos/',
subTitle: '',
time: ''
},
// our playlist
playlist: [
{
url: 'DRINK DIFFERENTLY - 480x272.m4v',
autoPlay: true
},
{
url: 'DRINK DIFFERENTLY - 480x272.m4v'
}
],
// show playlist buttons in controlbar
plugins: {
controls: {
playlist: true,
// display properties such as size, location and opacity
top: 20,
left: 0,
bottom: 0,
opacity: 0.95,
// styling properties (will be applied to all plugins)
background: '#000', // url(/my/custom/controls.png) no-repeat 3px 6px',
backgroundGradient: 'low',
// controlbar specific settings
timeColor: '#980118',
all: false,
play: false,
scrubber: true,
fullscreen: true,
// tooltips (since 3.1)
tooltips: {
buttons: false,
//fullscreen: 'Enter fullscreen mode'
},
autoHide: {
enabled: true,
// always enable
fullsccreenOnly: false,
// make it hide faster
hideDelay: 1000,
mouseOutDelay: 500
}
}
}
});
/*
here comes the magic plugin. It uses first div.clips element as the
root for as playlist entries. loop parameter makes clips play
from the beginning to the end.
*/
$f("videoPlayer").playlist("div.clips:first", {loop:true});
});
</script>
Here is the HTML area:
<div class="box-movie">
<!-- the player using splash image -->
<a class="player plain" id="videoPlayer">
<img src="images/play_text_large.png" />
</a>
<div class="clips" style="margin-top:15px;">
<!-- single playlist entry as an "template" -->
<a href="${url}">
<!--${title}--> <!--<span>${subTitle}</span>-->
<!--<em>${time}</em>-->
</a>
</div>
<!-- let rest of the page float normally -->
<br clear="all"/>
</div>
EDIT
I actually found what the issue might be. When it loads, it is pretty much just a splash image, and not the actual player. You can view this at http://thepartysource.com/index_test.php . If I set the 2nd clip to autoplay, it does so after the first finishes.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我必须将 div.clips 标签更改为:
指定 flowplayer 的 href 以开始。这让播放器在页面加载时加载,并且自动播放开始工作。
I had to change the div.clips tag to:
specifying the href to the flowplayer to start with. This let the player load on page load, and autoPlay began working.