Question

在我的网站上，在后台播放视频。当我转到另一页时，如何在同一点恢复视频？用ajax刷新的页面。我试图通过主页上的小脚本来解决它：

<script>
var vid = document.getElementById("video");
vid.addEventListener("canplay", function(e) {
  var currTime = this.currentTime;
  this.play();
 }, false
);
</script>

另一个HTML页面上的另一个脚本，我要在其中继续播放视频：

<script>
var vid = document.getElementById("myVideo");
    vid.addEventListener("canplay", function(e) {
    this.currentTime = currTime;
    this.play();
 }, false
 );
</script>

我遇到下一个错误：

Uncaught ReferenceError: currTime is not defined
at HTMLVideoElement.<anonymous>

我对这个解决方案正确吗？如果我可以解决此错误，它将起作用吗？如果回答：是的，我如何全球化这个“ currTime”？谢谢。

已更新：视频的HTML代码：

<video loop muted autoplay poster="../static/images/wallpaper.png" class="fullscreen-bg__video" id="video"> <source src="../static/videos/wallpaper.mp4" type="video/mp4"> <source src="../static/videos/wallpaper.webm" type="video/webm"> </video>

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin:0;
}

在页面上，我在其中暂停了具有相同代码但带有另一个ID的视频。

Answer 1

import ipywidgets as widgets

def return_x(x):
    return x

widgets.interact(return_x, x=widgets.IntSlider(min=0, max=10, value=1))

注意：<script> var vid = document.getElementById("video"); vid.addEventListener("canplay", function(e) { localStorage.setItem("videoTime", this.currentTime); this.play(); }, false ); </script>仅一次完成。您可以将localStorage.setItem("videoTime", this.currentTime)的时间设置为新值。

setInterval()

重新加载后，获得物品：

setInterval(() => {localStorage.setItem("videoTime", this.currentTime);},1000);

更新：

在我的机器上对其进行了测试。适用于任何.html文件。只需将其粘贴为脚本即可：

        <script>
    var vid = document.getElementById("myVideo");
        vid.addEventListener("canplay", function(e) {
        if(localStorage.getItem("videoTime") !== null) {
           this.currentTime = localStorage.getItem("videoTime");
        }

        this.play();
     }, false
     );
    </script>

setInterval（（）=> {localStorage.setItem（“ videoTime”，vid.currentTime）;}，1000）; }

<script>
        window.onload = () => {
            var vid = document.getElementById("video");
            if(localStorage.getItem("videoTime") !== null && localStorage.getItem("videoTime") !== undefined) {
                vid.currentTime = localStorage.getItem("videoTime");   }

在窗口加载后执行脚本。
将vid作为HTMLElement
检查是否存在键为</script>的localStorage条目。
如果是，请使用vidTime设置vid时间
每隔第二个新视频时间更新一次：vid.currentTime = localStorage.getItem("videoTime");

带有背景视频的页面刷新

1 个答案: