我一直试图在我网站的主页上做以下操作：全屏播放视频（无控件，无循环，静音，自动播放，存储在本地），当它结束时，视频被隐藏并显示一个div元素。
我习惯于使用HTML和CSS，但不太喜欢使用JavaScript，所以到目前为止，我所做的是放置视频，并使用复选框隐藏/显示元素（如图所示），然后尝试修改它，这样它就可以检测到视频何时结束，但我无法使其工作。
我使用的代码可能是错误的，因为它是为一个复选框准备的，但我也尝试了写在那里的解决方案，似乎问题来自用于检测视频何时结束不工作的函数。
以下是我尝试使其自动化的内容：
null
#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>null
我使用Visual Studio代码，我的web浏览器是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
