Question

所以我有一个包含视频的html div；

<body>
<div id="loginVideoLayer" class="loginvideoLayer">

    <video id="loginVideo" height="100%" width="100%" autoplay muted onEnded="videoEnded()">

        <source src="Videos/Log\_in.mp4" type="video/mp4">

    </video>

</div>
</body>

以及以下我想在视频结束时隐藏整个div的脚本；

<script>
function videoEnded() {

  var x = document.getElementById("loginVideoLayer");

  if (x.style.display === "block") {

x.style.display = "none";

  } else {

x.style.display = "block";

  }
</script>

但是，当视频结束时，它只会变黑。任何帮助，将不胜感激。

Answer 1

您不需要else语句。视频结束时。它结束并显示为无。还要怎么做？没有。

您的问题：您的视频处于自动播放状态时，会在第一次结束时调用该功能。隐藏，然后视频开始并再次播放（隐藏时），然后回到display:block

因此，基本上，您的代码应尽可能简单：

function videoEnded() {
  var x = document.getElementById("loginVideoLayer");
  x.style.display = "none";
  }

除非您想过一段时间重新播放视频。

视频结束时隐藏包装<div>

1 个答案: