Html video should stop at first frame

Question

I have a .mp4 video in my html page. I applied autoplay to that video, it stops at ending frame. My concern here is this video should come back at first frame once the video playing done. Can anybody please suggest what should i do to do this. Thanks

Answer 1

If you just want the video to loop and start again you can use the 'loop' attribute:

<video controls loop>
  <source src="yourVideo.mp4" type="video/mp4">
  ...
</video>

If you want to detect the end of the video and do something else, like restart the video you can use the end of video event in JavaScript:

$("#yourVideo").on("ended", function() {
   //Add whatever you want to do when the video ends here
   video.pause();
   video.currentTime = 0;
   video.play();  //You may not need this - experiment on different browsers
   video.pause();
});

Answer 2

Must include js file I am using CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type='text/javascript'>
     $(document).ready(function () {
     document.getElementById('Sample').addEventListener('ended',myHandler,false);  
          function myHandler(e) {
               var video =document.getElementById('Sample');
               video.currentTime = 0;
               video.pause();
          }
     });
</script>

HTML

<video src="video.mp4" id="Sample" autoplay>
      video not supported
</video>

Answer 3

By javascript and assuming that you know the framerate of your video:

function goFirstFrame () {
    var video = document.getElementById('videoId');
    var frameTime = 1/25; // If your video is 25fps
    video.currentTime = 0 + frameTime;
    video.pause();
 }