javascript - 加载视频后页面不会重新加载

Question

就是下面这种情况。我有一个网站，上面有一张图片，如果您单击该图片，该图片应该会被自动播放的视频替换。

我的代码如下所示:

HTML:

<div id="heaven-video">
  <img src="/images/heavenpicture_08.png" width="100%" height="auto" onclick="startVideo()"/>
  <video width="100%" height="auto" controls="true">
    <source src="videos/heavenmovie.mp4" type="video/mp4"/>
      Your browser does not support HTML5 video.
  </video>
</div>

JS:

function startVideo() {
  $("#heaven-video video").get(0).load();
  $("#heaven-video video").on('loadeddata', function(e) {
    $("#heaven-video img").css("display", "none");
    $(this).css("display", "block");
    $(this).get(0).play();
  });
}

CSS:

#heaven-video {
  position: absolute;
  left: 38.2%;
  top: 16.9%;
  width: 29.1%;
  height: auto;
}

#heaven-video video {
  display: none;
}

到目前为止，这是有效的(当您单击图像时，将加载视频，加载完成后，图像将被视频替换并自动开始)。

但是如果你想现在重新加载页面，它正在加载无休止。所以什么也没有发生!

这看起来，好像代码中有一个永无止境的循环或类似的东西。我想，也许是因为 EventListener？我试图添加这个 "$("#heaven-video video").off();"在被调用的函数中，当事件监听器被触发时。但这并没有改变任何东西。

有什么想法吗？

感谢您的帮助。

Answer 1

        $(document).ready(function() {
            $('body').bind('beforeunload',function(){
               //do something
               //$("#heaven-video video").currentTime = 0;
            });
            function startVideo() {
              $("#heaven-video video").get(0).load();
              $("#heaven-video video").on('loadeddata', function(e) {
                $("#heaven-video img").css("display", "none");
                $(this).css("display", "block");
                $(this).get(0).play();
              });
            }
        });