根据本地存储中的值播放视频

Question

我知道这个问题可能在这里被问过几次，但是我找不到我一直在寻找的解决方案。我们有一个要求，即用户应该能够暂停视频并从他们离开的地方继续。

我能够达到能够从本地存储存储和获取暂停时间的地步，但是我一直面临从存储值播放视频的挑战。下面是代码。

<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>

如果有人能帮我解决这个问题，我将不胜感激。如果需要更多详细信息，请告诉我。

Answer 1

你应该只在播放时获取时间，并在暂停时保存。播放时设置当前时间为本地存储暂停时间。像这样：

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>

Answer 2

要在 javascript 中暂停和播放视频，您实际上 不需要 将时间保存到本地存储。话虽这么说，如果您仍然想那样做，您只需要记住这些行：

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

for reference

此外，当我尝试你的代码时它不会改变播放暂停，所以我做了一些调整。

我是这样实现的：

<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>

查看这些页面了解更多信息：

根据本地存储中的值播放视频

Play a video based on a value from local storage

javascript

html5-video