根据本地存储中的值播放视频
我知道这个问题可能已经在这里被问过几次，但是我找不到我一直在寻找的解决方案。我们有一个要求，用户应该能够暂停视频并从离开的地方恢复。
我能够达到能够从本地存储存储和获取暂停时间的程度，但是我一直面临着从存储值播放视频的挑战。下面是代码。
<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>
如果这里有人能帮助我解决这个问题，我将不胜感激。如果需要更多详细信息，请告诉我。
天涯尽头无女友2回答
-
汪汪一只猫
您应该只在播放时获取时间，并在暂停时保存。将当前时间设置为本地存储播放时暂停的时间。像这样：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> -
沧海一幻觉
要在 JavaScript 中暂停和播放视频，您实际上不需要将时间保存到本地存储。话虽这么说，如果你仍然想这样做，你只需要记住这些行：localStorage.setItem('CaptureTime', getCurTime());PausedTime = localStorage.getItem('CaptureTime');vid.currentTime = PausedTime;另外，当我尝试你的代码时，它不会将播放更改为暂停，所以我做了一些调整。这就是我实现这一切的方式：<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>
随时随地看视频慕课网APP
相关分类
JavaScript