Skip to content

Instantly share code, notes, and snippets.

@neo22s

neo22s/video.html

Last active August 20, 2023 14:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neo22s/a01cc0aff86aebc81c165f9c96c4fdeb to your computer and use it in GitHub Desktop.
Save neo22s/a01cc0aff86aebc81c165f9c96c4fdeb to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Video Position Saving
Raw
video.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<video controls="" src="https://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4?" data-origwidth="0" data-origheight="0" ></video>
<video controls="" src="https://s3.amazonaws.com/akamai.netstorage/HD_downloads/rbsp_launch_480p.mp4?" data-origwidth="0" data-origheight="0" ></video>
<script>
jQuery(document).ready(function( $ ) {
$("video").on("pause", function(event) {
// Save into local storage,if you change the browser will not work
localStorage.setItem(btoa(this.src), this.currentTime);
});
$("video").on("play", function(event) {
$storedtime = localStorage.getItem(btoa(this.src));
// Get the time from localStorage and play if not at the end.
if ($storedtime < this.duration)
this.currentTime = $storedtime;
this.play();
});
//if you close the window and video playing store the current time
$(window).on("unload", function(e) {
$("video").each(function(index, value) {
if ( ! this.paused ) {
localStorage.setItem(btoa(this.src), this.currentTime);
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment