Search code examples
javascriptvideohtml5-videomedia-playervideo.js

Add Event after video play is ended


In Laravel project ,I have video vjs player as in this code :

<video
   id="my-video"
   class="video-js "
   controls 
   preload="auto"
   width="100%"
   height="auto"
   poster={{asset('images/'.$course->id.'.png')}}
   data-setup='{"fluid": true}'
   >
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
</video>

I want after the video end of play do and action (add data to server),I did this but don't work :

<script>
    var vid = document.getElementById("my-video");
    vid.onended = function() {
    alert("The video has ended");
};
</script>

How can I solve this?


Solution

  • As Jsplayer not worked correctly I used html5 video player and it is fine:-

    <video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
    controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
    onended="alert('it is worked')">
        <source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
        <source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
    </video>