【问题标题】:How do I make my header title disappear when my video is playing?播放视频时如何使标题标题消失?
【发布时间】:2021-03-11 14:21:13
【问题描述】:

我正在尝试让我的标题标题在我的视频播放时在 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> 

【问题讨论】:

    标签: javascript html video header


    【解决方案1】:

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

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

    【讨论】:

    • 是的,我试过了还是不行,我很困惑
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多