如何解决如何在 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 != '']
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。