Javascript 如何在视频停止播放后隐藏或淡出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\uu video'）[0].style.opacity=“0”；
document.getElementsByClassName（'header\uu title'）[0].style.opacity=“100”；
}

.header\uu标题{
过渡：1s；
不透明度：0；
}
.background\u视频{
转化：translateY（-50%）；
过渡：1s；
}

什么时候
银行会议


未来
金钱的未来就在这里。

您需要调查已结束的事件、绝对定位和CSS动画/转换-如果您仍然被卡住，请尝试并返回一些代码。这是否回答了您的问题。。。或者@s.kuznetsov不，没有人帮我谢谢你的推荐，但不幸的是，这没用，也许我没说清楚。我希望视频保持在当前位置，并覆盖整个标题部分。当视频结束时，我希望它在H1标题取代它的位置时消失，而不是在视频下面。