Start video from where you left off - resume video from where you left off - website

Asked

Viewed 128 times

-2

How do I keep the current progress of a video saved, even when updating or leaving the page?

The video is on the page with this simple code:

< div class="embed-Responsive embed-Responsive-16by9" >
< iframe class="embed-Responsive-item" src="video.mp4" allowfullscreen>
< /div >

html5-video video-player videojs

  • Save video time on a Torage locale. How do you think the video time: https://answall.com/questions/289993/como-verifio-tempo-de-um-video

1 answer

1


Hello.

Solution:

var temp = 0;
var vid = document.getElementById('myvideo');

vid.onloadstart = function() {
/* if ( typeof localStorage.get('temp') == 'number') {
  temp = localStorage.getItem('temp');
  vid.currentTime = temp;
}*/
setInterval(function() {
  temp = vid.currentTime;
  // localStorage.setItem('temp',temp);
}, 1000);
};
<DOCTYPE html>
  <html>

  <body>
    <video width="320" height="240" id='myvideo' controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
    <br>
    <button onclick='console.log(temp)'>Tempo</button>
  </body>

  </html>

The video every second will update the localStorage with video time, this will prevent crashes.

OBS: Remove the // and the /* */

Source:

https://www.w3schools.com/tags/ref_av_dom.asp

https://www.w3schools.com/html/html5_video.asp

Browser other questions tagged html5-video video-player videojs

You are not signed in. Login or sign up in order to post.