我知道这个问题可能已经在这里被问过几次，但是我找不到我一直在寻找的解决方案。我们有一个要求，用户应该能够暂停视频并从离开的地方恢复。我能够达到能够从本地存储存储和获取暂停时间的程度，但是我一直面临着从存储值播放视频的挑战。下面是代码。<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 回答
汪汪一只猫
TA贡献1898条经验 获得超8个赞
您应该只在播放时获取时间，并在暂停时保存。将当前时间设置为本地存储播放时暂停的时间。像这样：
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>
沧海一幻觉
TA贡献1824条经验 获得超5个赞
要在 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>
添加回答
举报
0/150
提交
取消