gpt4 book ai didi

javascript - Flowplayer 背景图像未出现

转载 作者:太空宇宙 更新时间:2023-11-04 04:19:55 27 4
gpt4 key购买 nike

我将 Flowplayer 用于客户的自定义内部网,并使用 CKEditor 添加页面内容。在 HTML 中无法访问网站的 HEAD),所以我一直在使用内联 CSS 语法。

客户端请求在点击播放之前在播放器区域显示图像。我可以仅使用内联 CSS 获得启动画面或海报吗?

<p>Here is a new sample video.</p>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center; background-image:url('http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg');"></div>
<script>
$f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4',
scaling: 'fit',
autoPlay: false,
autoBuffering: true,
provider: 'rtmp'
},
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.12.swf",
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
}
},
canvas: {
backgroundGradient: 'none'
}
});
</script>

到目前为止我没有尝试显示背景图片。播放器以黑色背景加载。

这里有一把 fiddle 可以玩:http://jsfiddle.net/GuVbJ/

最佳答案

您需要做的就是将图像放入 flowplayer div 中。然后,Flowplayer 使用该图像作为初始屏幕。当您点击图片时,将播放视频。

示例

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center;">
<img src="http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg" alt="Bacon" />
</div>
<script>
$f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4',
scaling: 'fit',
autoBuffering: true,
provider: 'rtmp'
},
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.12.swf",
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
}
},
canvas: {
backgroundGradient: 'none'
}
});
</script>

参见 jsFiddle

有关启动画面的更多详细信息,请参阅 flowplayer docs

关于javascript - Flowplayer 背景图像未出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19258270/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com