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

我用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>

//在文档准备就绪后运行脚本
$（函数（）{
//将flowplayer安装到CSS类为“player”的元素
var player=$（“.player”）.flowplayer({
swf：“flowplayer-5.4.0.swf”
});
});
player.load（函数（）{
警报（“以编程方式加载播放器”）；
});

如果视频已完成，如何将页面重定向到？如何激发已结束事件以检测视频结束？ 提前谢谢

更新

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

//主函数，封装所有函数
函数init（）{
var video=document.getElementById（“vid”）；
video.onended=功能（e）{
警报（“正常”）；
//导航页面的代码
}
}
$（函数（）{
//将flowplayer安装到CSS类为“player”的元素
var player=$（“.player”）.flowplayer({
swf：“flowplayer-5.4.0.swf”
});
});

查看更多信息

更新

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

//主函数，封装所有函数
函数init（）{
var video=document.getElementById（“vid”）；
video.onended=功能（e）{
警报（“正常”）；
//导航页面的代码
} 
}

您检查过这个答案吗？

您还可以尝试每隔几毫秒检查一次视频的“ended”属性

---

谢谢你的回答。我已如上所述更改了我的代码。但是它不起作用！上面的代码是我用来在IOS中播放视频的。所以我不能播放没有那个div的视频。你的意思是我需要删除div并将class=“player”添加到视频标签，对吗？Naa。。它应该是我提到的技术的javascript api如果你使用html5标签，那么可能会有其他选择，等等，谢谢你的帮助，我已经为这个问题工作了2天了！我试过W3学校的代码。但我总是变得虚伪。这是因为我正在为flow player使用div。如何将其更改为工作状态？@NewPHP刚刚在此处选中，请定期检查玩家对象的“finished”属性。可能存在重复的

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

function checkIfEnded( )
{
  myVid=document.getElementById("video1");
  //alert(myVid.ended);
  if ( !myVid.ended )
  {
    setTimeout( "checkIfEnded( )", 1000);
  }
  else
  {
    //goto google.com
  }
}