我已经尝试过使用flowplayer的视频标签。代码如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<!-- 2. flowplayer -->
<script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"></script>
<!-- 3. skin -->
<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.0/skin/minimalist.css" />
<div class="player" data-engine="flash" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " >
<video preload="none" poster="images.jpeg" id="vid">
<source type="video/webm" src="file4.webm"/>
<source type="video/mp4" src="file2.mp4"/>
<source type="video/ogg" src="file2.ogv"/>
</video>
</div>
<script>
// run script after document is ready
$(function () {
// install flowplayer to an element with CSS class "player"
var player= $(".player").flowplayer({
swf: "flowplayer-5.4.0.swf"
});
});
player.load(function() {
alert("player was loaded programmatically");
});
</script>
如果视频播放完成,如何将页面重定向到http://google.com?如何触发结束事件以检测视频结束? 提前谢谢!
更新
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"></script>
<script type="text/javascript">
// Master function, encapsulates all functions
function init() {
var video = document.getElementById("vid");
video.onended = function(e) {
alert('ok');
// code to navigate page
}
}
</script>
<script>
$(function () {
// install flowplayer to an element with CSS class "player"
var player= $(".player").flowplayer({
swf: "flowplayer-5.4.0.swf"
});
});
</script>
<a class="player" data-engine="flash" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; " >
<video preload="none" poster="images.jpeg" id="vid">
<source type="video/webm" src="file4.webm"/>
<source type="video/mp4" src="file2.mp4"/>
<source type="video/ogg" src="file2.ogv"/>
</video>
</a>
答案 0 :(得分:1)
// make a server call each time a clip starts or finishes
$f("#myPlayer").onStart(function(clip) {
$.get("statistics.php?action=start&clip=" + clip.url);
}).onFinish(function(clip) {
$.get("statistics.php?action=finish&clip=" + clip.url);
});
查看This了解详情
<强>更新强>
<script type="text/javascript">
// Master function, encapsulates all functions
function init() {
var video = document.getElementById("vid");
video.onended = function(e) {
alert('ok');
// code to navigate page
}
}
<script>
答案 1 :(得分:0)
你看过这个答案吗? HTML 5 Video OnEnded Event not Firing
此外,您可以尝试每隔几毫秒检查一次视频的“已结束”属性 http://www.w3schools.com/tags/av_prop_ended.asp
function checkIfEnded( )
{
myVid=document.getElementById("video1");
//alert(myVid.ended);
if ( !myVid.ended )
{
setTimeout( "checkIfEnded( )", 1000);
}
else
{
//goto google.com
}
}