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

Question

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

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

我使用的代码可能是错误的，因为它是用于复选框的，但我也尝试了写成 there 的解决方案，看来问题出在用于检测的函数当视频结束时无法播放。

以下是我尝试将其自动化的方法：

#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，我的网络浏览器是 Edge。提前谢谢你，我真的卡住了！

Answer 1

这应该有效，

const video = document.querySelector('video');
const menuDisplay = document.querySelector('#menudisplay');
video.addEventListener('ended', (event) => {
    menuDisplay.style.display = 'block';
    //you can also do things with 'event' obj 
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

Answer 2

您可以使用此脚本来检测视频何时结束以及结束后应显示的内容：不支持视频

 <script type='text/javascript'>
         document.getElementById('myVideo').addEventListener('ended',myHandler,false);
               function myHandler(e) {
           // What you want to do after the event
          }
 </script>

Answer 3

喜欢其他人。

var video = document.getElementById("video");
var videoPl = document.getElementById("menudisplay");

video.addEventListener('ended', function(e) {
  videoPl.style.display = 'block'
})

https://www.w3schools.com/jsref/event_onended.asp

Answer 4

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

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>

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

How to display a div element when HTML5 video ends

html

javascript

css

video