如何解决视频停止播放后如何隐藏或淡出 HTML 视频
我想要做的就是让我的视频在完成后消失,以便显示我的 H1 标题。视频和 H1 在标题中。
这可以在 CSS 或 Javascript 中解决 - 我不介意。
<div class="header__title">
<h1>
When
<!-- Green highlight effect -->
<span class="highlight">banking</span>
meets<br />
<span class="highlight">the future</span>
</h1>
<h4>The future of money is here.</h4>
<img
src="img/Javacoin homepage picture.png"
class="header__img"
alt="Javacoin items"
/>
</div>
<div class="background__video">
<video autoplay muted>
<source src="Javacoin Corporate Intro - Final.mp4" type="video/mp4">
</video>
</div>
解决方法
已结束的事件
您应该使用 onended 事件在您的应用中进行更改。
let video = document.querySelector("video");
let h1 = document.getElementById("title"); // You should attach an identifier to that h1
video.onended = function(){
h1.style.display = "none";
}
如果你想更花哨,你应该在 css 中使用 transition
属性到基本元素
h1{
transition: all ease-in-out .3s
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。