0

This is a bit crazy, but I got a project where I couldn't use JS.

I have an mp4 that needs only to be played after the CSS animation is finished. To be better explained, I need to hide the cover image, then play the video behind it.

Is there a way to play mp4 from CSS/HTML only?

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;
  }
}
AlbertSamuel
  • 584
  • 10
  • 33
  • CSS (or jQuery, for that matter) can't animate between ```display: none;``` and ```display: block;```. Check this question: https://stackoverflow.com/questions/13037637/css-animation-and-display-none – Pratik Malvi Oct 23 '19 at 08:33
  • Hey @PratikMalvi, yes I know. That's why I trick it using the animation's opacity. Anyway, that is not eh question. I am asking if it possible to play mp4 from css/html? – AlbertSamuel Oct 23 '19 at 23:11

1 Answers1

1

No, it isn't possible to do this without JavaScript.

No play control API is available by CSS.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Right, is there any alternatives? Like updating the mp4 to GIF or anything? – AlbertSamuel Oct 23 '19 at 23:57
  • No, there isn't. What's your reasoning for not using a simple script? – Brad Oct 24 '19 at 00:02
  • I am just doing a re-skin of the existing Kiosk game, so there is a limitation that the kiosk doesn't allow any javascript. Thanks anyway Brad – AlbertSamuel Oct 24 '19 at 00:08
  • How, specifically, does it not allow any JavaScript? – Brad Oct 24 '19 at 00:10
  • I am submitting the skin to someone from the Kiosk provider. And they will check it, not really sure how and why they do it. – AlbertSamuel Oct 24 '19 at 00:12
  • You're out of luck then, at least for the specific question you asked. It would be helpful though if you could show us what you're actually trying to do. Perhaps we can suggest an alternative. (For example, why not just put whatever this is in the video itself and just play the video?) – Brad Oct 24 '19 at 00:14
  • Maybe you could negotiate with the kiosk provider to add some JavaScript on their end that they can audit? And then you can control it via some `data-*` attributes or something. – Brad Oct 24 '19 at 00:15
  • Thanks Brad, I might try to negotiate with the kiosk provider with the custom JS. We are creating a game, and we have an mp4 animation that only plays when the user is winning. – AlbertSamuel Oct 24 '19 at 00:25