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？我试图添加这个＆＃34; $（＆＃34;＃heaven-video video＆＃34;）。off（）;＆＃34;在触发事件监听器时调用的函数中。但这并没有改变任何事情。

有什么想法吗？

感谢您的帮助。

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();
              });
            }
        });

加载视频后，页面无法重新加载

1 个答案: