如何为 HTML 视频标签应用 onEnded 事件

Question

我已经尝试使用 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>

Answer 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>

Answer 2

你检查过这个答案吗？ 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
  }
}