如何解决如何在视频停止播放后隐藏或淡出 HTML 视频,然后显示下面的 H1 标题标题
我希望视频播放完后隐藏/淡出。并且我希望 h1 标题在视频结束(隐藏/淡出)时出现在相同的位置。
如何在 JavaScript 或 CSS 中实现这一点?
HTML 代码:
<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="Minimalist bank items"
/>
</div>
<div class="background__video">
<video autoplay muted>
<source src="Javacoin Corporate Intro - Final.mp4" type="video/mp4">
</video>
</div>
解决方法
const video = document.getElementById('vid');
video.onended = () => {
document.getElementsByClassName('background__video')[0].style.opacity = "0";
document.getElementsByClassName('header__title')[0].style.opacity = "100";
}
.header__title {
transition: 1s;
opacity: 0;
}
.background__video {
transform : translateY(-50%);
transition: 1s;
}
<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="Minimalist bank items" />
</div>
<div class="background__video">
<video autoplay muted id="vid">
<source src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" type="video/mp4">
</video>
</div>
这可能会!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。