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

问题描述

我一直在尝试在我的网站主页上执行以下操作：全屏播放视频（无控件、无循环、静音、自动播放、本地存储），当它结束时，视频被隐藏并显示一个 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。提前谢谢你，我真的被卡住了！

解决方法

这应该可行，

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

您可以使用此脚本来检测视频何时完成以及之后应该显示什么：不支持视频

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

和其他人一样。

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

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

#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>

lst = ['','how','','are','you','']

lst = [element for element in lst if element != '']

html javascript video video