如何检测 Flowplayer 何时开始播放视频?
我正在使用 Flowplayer Flash 视频播放器 在 AnythingSlider。我需要检测用户何时单击视频上的开始按钮,以便停止幻灯片放映并允许用户观看视频。我尝试使用此代码只是为了获得一个警报框,但它没有执行任何操作(代码位于页面末尾,结束 标记之前)
<script type="text/javascript">
$f("player","global/js/flowplayer/flowplayer-3.1.5.swf",{
onStart: function(clip) {
alert('player started');
}
});
</script>
: Flowplayer 作为 html5media 库 的一部分实现,它会自动检测浏览器是否可以处理 标签;如果没有,它将用 Flowplayer 替换下面的锚标记:
<video id="vid" width="372" height="209"
poster="global/vid/bbq-poster.jpg" controls preload>
<source id="videoSource" src="global/vid/BBQ_Festival.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
onerror="fallback(this.parentNode)" ></source>
<a
href="global/vid/BBQ_Festival.mp4"
style="display:block;width:372px;height:209px; padding-left:5px; "
id="player">
</a>
</video>
因此 $f() 函数调用位于页面末尾的 JavaScript 块中,以便让播放器有机会正确加载。我做错了什么?谢谢。
更新:这是 Firebug 显示的生成的 HTML;尝试使用玩家的“vid”ID,但仍然没有成功。
<object width="100%" height="100%" type="application/x-shockwave-flash"
data="http://html5media.googlecode.com/svn/trunk/src/flowplayer.swf"
id="vid_api">
<param value="true" name="allowfullscreen">
<param value="opaque" name="wmode">
<param value="always" name="allowscriptaccess">
<param value="high" name="quality">
<param value="false" name="cachebusting">
<param value="#000000" name="bgcolor">
<param value="config={"play":null,"playlist":[{"url":"http://localhost/cms/global/vid/poster.jpg",
"scaling":"fit","fadeInSpeed":0,"fadeOutSpeed":0},
{"url":"http://localhost/cms/global/vid/BBQ_Festival.mp4",
"autoPlay":false,"autoBuffering":true,"scaling":"fit",
"fadeInSpeed":0,"fadeOutSpeed":0}],
"clip":{"scaling":"fit","fadeInSpeed":0,"fadeOutSpeed":0},
"plugins":{"controls":{"url":"http://html5media.googlecode.com/svn/trunk/src/flowplayer.controls.swf",
"fullscreen":false,"autoHide":"always"}},
"playerId":"vid"}" name="flashvars"></object>
I'm using the Flowplayer Flash video player to play MP4 videos inside an AnythingSlider. I need to detect when the user has clicked the start button on the video so to stop the slideshow and allow the user to view the video. I've tried using this code just to get an alert box but it doesn't do anything (the code is at the end of the page, before the closing </body>
tag):
<script type="text/javascript">
$f("player","global/js/flowplayer/flowplayer-3.1.5.swf",{
onStart: function(clip) {
alert('player started');
}
});
</script>
The Flowplayer is implemented as part of the html5media library, which automatically detects whether the browser can handle the <video>
tag; if not, it replaces the anchor tag below with the Flowplayer:
<video id="vid" width="372" height="209"
poster="global/vid/bbq-poster.jpg" controls preload>
<source id="videoSource" src="global/vid/BBQ_Festival.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
onerror="fallback(this.parentNode)" ></source>
<a
href="global/vid/BBQ_Festival.mp4"
style="display:block;width:372px;height:209px; padding-left:5px; "
id="player">
</a>
</video>
So the $f() function call is in a JavaScript block at the end of the page, to give the player a chance to load correctly. What am I doing wrong? Thanks.
UPDATE: Here's the generated HTML as shown by Firebug; tried using the "vid" ID for the player and still no luck.
<object width="100%" height="100%" type="application/x-shockwave-flash"
data="http://html5media.googlecode.com/svn/trunk/src/flowplayer.swf"
id="vid_api">
<param value="true" name="allowfullscreen">
<param value="opaque" name="wmode">
<param value="always" name="allowscriptaccess">
<param value="high" name="quality">
<param value="false" name="cachebusting">
<param value="#000000" name="bgcolor">
<param value="config={"play":null,"playlist":[{"url":"http://localhost/cms/global/vid/poster.jpg",
"scaling":"fit","fadeInSpeed":0,"fadeOutSpeed":0},
{"url":"http://localhost/cms/global/vid/BBQ_Festival.mp4",
"autoPlay":false,"autoBuffering":true,"scaling":"fit",
"fadeInSpeed":0,"fadeOutSpeed":0}],
"clip":{"scaling":"fit","fadeInSpeed":0,"fadeOutSpeed":0},
"plugins":{"controls":{"url":"http://html5media.googlecode.com/svn/trunk/src/flowplayer.controls.swf",
"fullscreen":false,"autoHide":"always"}},
"playerId":"vid"}" name="flashvars"></object>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你尝试过吗:
Did you try:
使用 onBufferFull 代替 onStart。
我正在使用 onStart,有时视频仍在缓冲,而 onStart 已经触发。
使用 onBufferFull,我现在视频已缓冲最少,并且它实际上已开始在屏幕上播放。
如果您需要在视频开始时触发事件,请确保保存在“第一次缓冲”的标志中。每当视频缓冲最少(我相信文档说 3 秒)要播放时,onBufferFull 就会被分块调用。
希望这有帮助。
Instead of onStart, use onBufferFull.
I was using onStart and sometimes the video was still buffering and onStart had already triggered.
Using onBufferFull, I now that the video has buffered a minimum and it has actually started playing on the screen.
If you need an event to be triggered just when the video started, make sure you save in a flag that "buffered for the 1st time gone". onBufferFull is called in chunks whenever the video has buffered a minimum (I believe the documentation says 3 seconds) to be played.
Hope this helps.