播放视频时如何让标题消失？

如何解决播放视频时如何让标题消失？

我试图在播放视频时让我的标题在 JavaScript 中消失。使用下面的代码，我可以让我的视频在播放完毕后消失。

// Background Video (hide)
const video = document.querySelector('video');
video.onended = function () {
video.style.display = 'none';
};

很遗憾，我在播放视频时无法让标题消失。下面的代码似乎无法完成这项工作。

   const header = document.querySelector('header');
   header.onplaying = function () {
   header.style.display = 'none';
};

任何帮助将不胜感激。

HTML

<header class="header">
  <nav class="nav">
    <img
      src="img/js logo.png"
      alt="Javacoin logo"
      class="nav__logo"
      id="logo"
    />
    <ul class="nav__links">
      <li class="nav__item">
        <a class="nav__link" href="#section--1">Features</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#section--2">Operations</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#section--3">Download</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--btn" href="#"
          >Open Account</a
        >
      </li>
    </ul>
  </nav>

  <div class="header__title">
    <h1 id="title">
          When
          <span class="highlight">banking</span>
          meets<br />
          <span class="highlight">the future</span>
        </h1>
        <h4>The future of money is here.</h4>
        <button class="btn--text btn--scroll-to">Learn more &DownArrow;</button>

        <img
        src="img/Javacoin homepage picture.png"
        class="header__img"
        alt="Javacoin items"
      />
      </div>
      <div class="background__video">
        <video src="Javacoin Corporate Intro - Final.mp4" type="video/mp4" autoplay muted></video>
        </div> 
</header> 

解决方法

不应该是 video.onplaying 而不是 header.onplaying 吗？

const header = document.querySelector('header');
video.onplaying = function () {
   header.style.display = 'none';
};