'Play a video based on a value from local storage

I am aware that this question might have been asked here a few times, however I could not find a solution I've been looking for. We have a requirement where the users should be able to pause the video and resume from where they left.

I was able to get to the point where I am able to store and fetch the paused time from local storage, however I have been facing challenges playing the video from the stored value. Below is the code.

<video id="myVideo" width="300" height="300" controls>
    <source src="Bunny.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video><br />

<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>

<script>
    var vid = document.getElementById("myVideo")

    function getCurTime() {
        return vid.currentTime
    }

    var isPlaying = false
    var PausedTime

    function PlayVideo() {
        var change = document.getElementById("PlayVideo")

        if (isPlaying) {
            vid.pause()

            //Storing the paused time to local storage
            localStorage.setItem('CaptureTime', getCurTime())

            //Get the saved time from local storage
            PausedTime = localStorage.getItem('CaptureTime')
            change.innerHTML = "Play"
        }

        else {

            vid.play()
            change.innerHTML = "Pause"
        }
        isPlaying = !isPlaying

    }
</script>

Would appreciate if anyone here could help me out with this. Please let me know if more details are needed.

javascript html5-video

Solution 1:^[1]

You should only get the time when playing, and save on pause. Set the current time to the local storage paused time when being played. Like this:

var vid = document.getElementById("myVideo");

function getCurTime() { 
  return vid.currentTime;
} 

var isPlaying = false;
var PausedTime;

function PlayVideo() {
    var change = document.getElementById("PlayVideo");
    //Get the saved time from local storage
    var PausedTime = localStorage.getItem('CaptureTime');
   
    if (isPlaying) {
      vid.pause();
    
      //Storing the paused time to local storage
      localStorage.setItem('CaptureTime', getCurTime());
      
      change.innerHTML = "Play"; 
    }

    else {
      vid.currentTime = PausedTime;
      vid.play();
      change.innerHTML = "Pause";  
    }
    
    isPlaying = !isPlaying;    

}

<video id="myVideo" width="300" height="300" controls>
  <source src="Bunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video><br/>

<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>

Solution 2:^[2]

To pause and play a video in javascript you don't actually need to save the time to local storage. That being said, if you still want to do it that way, you would just need to remember these lines:

localStorage.setItem('CaptureTime', getCurTime());
PausedTime = localStorage.getItem('CaptureTime');
vid.currentTime = PausedTime;

for reference

In addition, when I tried your code it wouldn't change the play to pause, so I made a few adjustments.

This is how I implemented it all:

<html> 
<body> 
        
        <button id="controls" onclick="play()" type="button">Play Video</button><br> 
        
        <video id="myVideo" width="320" height="176">
          <source src="Bunny.mp4" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        
    <script> 
        var vid = document.getElementById("myVideo"); 
        var isPlaying = false; //or this could be: var isPaused = vid.paused;
        
        function play() { 

            if(!isPlaying){
               vid.play(); 
               document.getElementById("controls").innerHTML = "Pause Video";
            }
            else{
                vid.pause(); 
                document.getElementById("controls").innerHTML = "Play Video";
            }
            isPlaying = !isPlaying;
         } 
     </script> 
    
        
 </body> 
 </html>

Check out these pages for more:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Michael Arvelo
Solution 2

'Play a video based on a value from local storage

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]