CODEWITHSUNDEEP
javascripthtmlvideo
user7962849
user7962849

Reputation:

How set html5 video to initial position after video is completed?

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();
    });
     
    
       


     

  });

Upvotes: 1

Views: 1618

Answers (3)

gwesseling
gwesseling

Reputation: 483

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;
    });
};
    
       


     

  });

Upvotes: 0

Anarion
Anarion

Reputation: 1038

$(document).ready(function() {

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

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

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

});

Upvotes: 2

Gleb Kostyunin
Gleb Kostyunin

Reputation: 3863

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.

Upvotes: 0

Related Questions