Воспроизвести видео HTML после CSS анимации - PullRequest
Новая
       11

Воспроизвести видео HTML после CSS анимации

0 голосов
/ 23 октября 2019

Это немного безумно, но у меня есть проект, в котором я не могу использовать JS.

У меня есть mp4, который нужно воспроизвести только после завершения CSS-анимации. Чтобы лучше объяснить, мне нужно спрятать изображение обложки, а затем воспроизвести видео за ним.

Существует ли способ воспроизведения mp4 только из CSS / HTML?

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;
  }
}

1 Ответ

1 голос
/ 24 октября 2019

Нет, это невозможно сделать без JavaScript.

API управления воспроизведением недоступен в CSS.

...