Detecting when end of media is reached

[Randy Craven]

Hello,

Is there a built-in event for Media Player that is raised when the end of a video is reached?  Of is it possible to raise an event when this happens, for example using the getCurrentTime and getDuration methods?

Thank you,

Randy Craven

[Muthukrishnan Kandasamy]

 

Hi Randy, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in EJ Media Player control. Yes, we have provided onMediaComplete event which will trigger video ends. We have prepared sample for your convenience, in this sample we display an alert message when the loaded video ends. Please refer to the below link for the sample. 

 

https://jsplayground.syncfusion.com/leo4p05d 

 

Documentation: https://help.syncfusion.com/js/mediaplayer/getting-started 

 

API: https://help.syncfusion.com/api/js/ejmediaplayer 

 

Demo: https://js.syncfusion.com/demos/jquery/#!/bootstrap/mediaplayer/youtube 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[Randy Craven]

Hello,

Thank you for your reply.  Your solution worked great.

I would like to ask a follow up question: Is there a way to disable the controls to advance the video, so that the person viewing cannot skip to the end without watching?

It appears this could be done by hiding the MediaPlayerId_ForwardIcon and MediaPlayerId_NextIcon elements.  But perhaps there is a property or other way which is better.

thank you,

Randy Craven

[Keerthana Rajendran]

Hi Randy,  

Good day to you,  

Yes, you can hide the forward and backward icons of MediaPlayer to prevent the skipping of video. You can add custom class using cssClass property and apply display:none style for these icons. Refer to the following code 

$("#utube_basicPlayer").ejMediaPlayer({ 

                    width: width, 

                    height: height, 

                    toolbarHeight: "70px", 

                     .  .  .  .  . 

                      renderMode: "advanced", 

                      cssClass : "custom", 

                     onMediaComplete: function(args){ 

                      alert("video is end"); 

                    } 

                }); 

<style> 

  .custom .e-media-control-container .e-media-toolbar .e-media-toolbar-playgroup .e-media-toolbar-icon.e-media-backward, .custom .e-media-control-container .e-media-toolbar .e-media-toolbar-playgroup .e-media-toolbar-icon.e-media-forward 

    { 

      display : none; 

    } 

     

  </style> 

Refer to the sample link below 

https://jsplayground.syncfusion.com/kze5k2vq 

Please let us know, if you need further assistance. 

Regards, 

Keerthana.  

[Randy Craven]

Thank you very much, Keerthana.

[Muthukrishnan Kandasamy]

 

Hi Randy, 

 

Thanks for the update. 

 

We are glad to know that given solution works. Please let us know if you need any further assistance. 

 

Regards, 

Muthukrishnan K