视频停止播放后如何隐藏或淡出HTML视频,然后显示位于下面的H1标头标题 [英] How do I hide or fade out HTML video after the video has stopped playing, then display the H1 header title which is under
本文介绍了视频停止播放后如何隐藏或淡出HTML视频,然后显示位于下面的H1标头标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望视频播放完毕后隐藏/淡出.我希望h1标头标题在视频结束时(隐藏/淡出)显示在同一位置.
I want the video to hide/fade out after the video has finished. And I want the h1 header title to appear in the same position when the video ends (hide/fades out).
如何在JavaScript或CSS中实现此功能?
How can I implement this in JavaScript or 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>
这可能会做到!
这篇关于视频停止播放后如何隐藏或淡出HTML视频,然后显示位于下面的H1标头标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文