视频停止播放后如何隐藏或淡出 HTML 视频

编程问答 2022-05-28

问题描述

我想要做的就是让我的视频在完成后消失，以便显示我的 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
}

https://www.w3schools.com/tags/av_event_ended.asp

htmlhtml5-videojavascriptvideovideo