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

【问题标题】：How to display a div element when HTML5 video endsHTML5视频结束时如何显示div元素
【发布时间】：2021-04-27 13:23:28
【问题描述】：

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

我习惯于使用 HTML 和 CSS，但不太使用 JavaScript，所以到目前为止我所做的是放置视频，并使用复选框来隐藏/显示元素（如图所示 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。提前谢谢你，我真的卡住了！

【问题讨论】：

查看以下文档：developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…

标签： javascript html css video

【解决方案1】：

在此示例中，我为 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>

【讨论】：

【解决方案2】：

这应该可以，

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

像其他人一样。

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

【讨论】：