HTML5视频结束时如何显示div元素
我一直试图在我网站的主页上做以下操作：全屏播放视频（无控件，无循环，静音，自动播放，存储在本地），当它结束时，视频被隐藏并显示一个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。提前谢谢，我真的卡住了！
共有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
-
问题内容： 您如何检测HTML5 元素何时播放完毕？ 问题答案： 您可以添加带有“ end”作为第一个参数的事件监听器 像这样 ：
-
问题内容： 我正在尝试将YouTube视频源放入HTML5标签，但似乎不起作用。经过一番谷歌搜索，我发现HTML5不支持YouTube视频URL作为来源。 您可以使用HTML5嵌入YouTube视频吗？如果没有，是否有任何解决方法？ 问题答案： 第1步：添加到您喜欢的YouTube网址 步骤2：在来源中寻找标签 第3步：添加到视频标签： 例： 注意那里似乎有些东西。我不知道该字符串可以工作多长时间
-
问题内容： 是否可以将html5-视频显示为画布的一部分？ 基本上与您在画布上绘制图像的方式相同。 谢谢！ 问题答案： var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var video = document.getElementById(‘video’); 我猜上面的代码是自我解
-
问题内容： [编辑：已解决，请参阅问题文本的中途] 有关了解在YouTube页面上播放视频的内容的快速提问： 综上所述 作为基于浏览器的GUI的一部分，我使用Selenium在Youtube上播放视频。 我需要知道视频何时完成播放，以便GUI进行其他操作（例如，将本地HTML馈入浏览器）。 代码段和问题 在这一点上，我可以考虑视频的长度。 但是，我想知道是否可以通过Selenium驱动程序查询Yo
-
本文向大家介绍HTML5如何嵌入视频？相关面试题，主要包含被问及HTML5如何嵌入视频？时的应答技巧和注意事项，需要的朋友参考一下 和音频类似，HTML5支持MP4、WebM和Ogg格式的视频，下面是简单实例：
-
问题内容： 鉴于此HTML： 如何使它们像这样显示内联： foo bar baz 不像这样： foo bar baz 问题答案： 那是另一回事：