发表新帖
发表新帖

Executing function at end of html5 video

前端 未结
关注
6 1484
南方客
南方客 2021-01-01 09:19

I have a html video, and I am wanting to run a function when a video ends. I have tried the following but I get nothing:

$(document).ready(function(){

    $
相关标签:
6条回答
  • 说谎
    2021-01-01 09:59

    For your paste & copy pleasure the jQuery solution:

    <video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
  $(document).ready(function(){
    $('video').on('ended',function(){
      console.log('Video has ended!');
    });
  });
/*]]>*/</script>

    Replace the 'video'-part with the correct selector for your video.

    EDIT: Here is the solution without jQuery:

    <video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
  document.querySelector('video').addEventListener('ended',function(){
    console.log('Video has ended!');
  }, false);
/*]]>*/</script>

    Replace the 'video'-part with the correct selector for your video.

    0 讨论(0)
  • 我寻月下人不归
    2021-01-01 10:05

    the only way i managed it to work is the following code:

    $('video')[0].on('ended',function(){
    console.log('Video has ended!');
});
    0 讨论(0)
  • 独厮守ぢ
    2021-01-01 10:14

    You can use on in the place of live. Because on method is supported by jquery new versions and live is deprecated in new versions.

    You can replace your code to this and your problem will be solved.

    $(document).ready(function(){

$('video').on('ended',function(){

    alert('video ended');

});

    });

    0 讨论(0)
  • 野的像风
    2021-01-01 10:21

    Here is something you can try:

    $(document).on('ended', 'video', function (e) {
    alert('video ended');
});

    You said that the video is dynamically inserted after the DOM is loaded. In this script, you search on DOM for the video element and binds it with the ended function.

    Here is the documentation for .on().
    Here is the SO question for dynamic items.

    I hope this helps!

    0 讨论(0)
  • 情深已故
    2021-01-01 10:23 
    <html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>
    0 讨论(0)
  • 鱼传尺愫
    2021-01-01 10:23

    use onended event

    var video = document.getElementsByTagName('video')[0];

video.onended = function(e) {
  alert('video ended');
}

    Read more on Everything you need to know about HTML5 video and audio

    0 讨论(0)
 看不清?
提交回复
热议问题