1

I have used html5 video tag to for playing video. Once the complete video is played, i want to set the video current time to zero. If i use loop video will come to initial position and will be automatically played. I want to bring video to initial position but automatic playing is not required. How to achieve this?

Html is

<div class="video-wrapper" id="my-video" >
    <video src="<?php echo asset_url().'videos/Video.mp4';?>" controlsList="nodownload" id="my-video"></video>
</div>

javascript is

$(document).ready(function() {
    /**
     * Video element
     * @type {HTMLElement}
    */
    var video = document.getElementById("my-video");

    /**
     * Check if video can play, and play it
    */
    video.addEventListener("canplay", function(){
        
      video.play();
    });
     
    
       


     

  });

3 Answers3

2

$(document).ready(function() {

    var video = document.getElementById("my-video");

    video.addEventListener("canplay", function(){
      video.play();
    });

    video.addEventListener("ended", function(){
      video.currentTime = 0;
    });

});
Anarion
  • 1,048
  • 6
  • 16
0

You can attach a listener to the 'ended' event (reference here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events) and in the handler set the video's currentTime to 0.

Gleb Kostyunin
  • 3,743
  • 2
  • 19
  • 36
0

You can use the onEnded event to check when the video ended and use the currentTime attribute to set the current time back to zero.

OnEnded event: onended event

$(document).ready(function() {
    /**
     * Video element
     * @type {HTMLElement}
    */
    var video = document.getElementById("my-video");

    /**
     * Check if video can play, and play it
    */
    video.addEventListener("canplay", function(){   
      video.play();
    });


     video.addEventListener("ended", function(){
      video.currentTime = 0;
    });
};
    
       


     

  });
gwesseling
  • 483
  • 6
  • 13