在 CSS 个动画后播放 HTML 个视频

Question

这有点疯狂，但我得到了一个无法使用 JS 的项目。

我有一个mp4，只需要在CSS动画结束后播放。为了更好地解释，我需要隐藏封面图像，然后播放它后面的视频。

有没有办法只播放 CSS/HTML 中的 mp4？

HTML

  <div class="chute-background-image" style="background-image: url(./fg_bg.png);"></div>
  <div class="winning-video">
    <video>
      <source src="./room.mp4" type="video/mp4">
    </video>
  </div>

CSS

.chute-background-image {
  opacity: 1;
  animation: hide 1s linear forwards;
}
@keyframes hide {
  0% {
    opacity: 1;
    display: block;
  }
  99% {
    opacity: 0;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

Answer 1

不，没有 JavaScript 就不可能做到这一点。

CSS 无法使用播放控件 API。

在 CSS 个动画后播放 HTML 个视频

Play HTML Video after CSS Animation

html

css

html5-video

css-animations