时间戳

首页 > 解决方案 > HTML5视频结束时如何显示div元素

javascript - HTML5视频结束时如何显示div元素

问题描述

我一直在尝试在我的网站主页上执行以下操作：全屏播放视频（无控件、无循环、静音、自动播放、本地存储），当它结束时，视频被隐藏并显示 div 元素。

我习惯使用 HTML 和 CSS，但不使用 JavaScript，所以到目前为止我所做的是放置视频，并使用复选框来隐藏/显示元素（如图所示），然后尝试修改它所以它会检测到视频何时结束，但我无法让它工作。

我使用的代码可能是错误的，因为它是用于复选框的，但我也尝试了那里编写的解决方案，似乎问题来自用于检测视频何时结束不起作用的函数。


这是我尝试使其自动化的内容：

#menudisplay {
    display: none;
    text-align: center;
    margin-top: 20vh;
  font-family: 'Montserrat';
}

#menudisplay ul {
    list-style-type: none;
}

#menudisplay ul li {
    padding: 110px;
}

.style {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color:lightgray;
}
<!DOCTYPE html>
<html>

  <head>
    <title>Website</title>
    <meta http-equiv="Content-Type" content="charset=UTF-8" />
    <link rel="stylesheet" href="./mystyle.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
  </head>

  <video autoplay muted class="style">
    <source src="./video.mp4" type="video/mp4">
    The video is not working.
  </video>

  <div id="menudisplay">

    <img class="style" src="./img.jpg">

    <ul>

      <li>
        <a href="./ex1.html">EXEMPLE 1</a>
      </li>

      <li>
        <a href="./ex2.html">EXEMPLE 2</a>
      </li>

    </ul>

  </div>


  <script>
    function myFunction() {
      var video = document.getElementById("video");
      var menudisplay = document.getElementById("menudisplay");

      if (video.ended == true) {
        menudisplay.style.display = "block";
        video.style.display = "none";
      } else {
        menudisplay.style.display = "none";
      }
    }

  </script>

</html>

我使用 Visual Studio Code，我的 Web 浏览器是 Edge。提前谢谢你，我真的卡住了！

标签： javascripthtmlcssvideo

解决方案

在此示例中，我为 DOMContentLoaded（以确保文档已加载）和视频结尾添加了一个均匀监听器。

document.addEventListener('DOMContentLoaded', e => {
  var video = document.getElementById("video");
  var menudisplay = document.getElementById("menudisplay");

  video.addEventListener('ended', e => {
    menudisplay.style.display = "block";
    video.style.display = "none";
  });
});
#menudisplay {
  display: none;
  text-align: center;
  margin-top: 20vh;
  font-family: 'Montserrat';
}

#menudisplay ul {
  list-style-type: none;
}

#menudisplay ul li {
  padding: 110px;
}

.style {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: lightgray;
}
<!DOCTYPE html>
<html>

<head>
  <title>Website</title>
  <meta http-equiv="Content-Type" content="charset=UTF-8" />
  <link rel="stylesheet" href="./mystyle.css" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>

<body>
  <video autoplay muted class="style" id="video">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <p>The video is not working.</p>
  </video>
  <div id="menudisplay">
    <img class="style" src="./img.jpg">
    <ul>
      <li>
        <a href="./ex1.html">EXEMPLE 1</a>
      </li>
      <li>
        <a href="./ex2.html">EXEMPLE 2</a>
      </li>
    </ul>
  </div>
</body>

</html>

推荐阅读