Display poster only if video can't be loaded

Question

i have two videos on a site, an intro (fading in from white) and loop following it (poster is taken from loop). I want to have the poster (in case some browsers don't support the videos), but i don't want to load it before the first video starts. Is there a possible solution for this? Right now it displays for split of a second and then the video starts from white fade.

Maybe i could add a delay and fade in time for the poster?

Thank you!

Answer 1

just use poster attribute like this

<video poster="file.png" controls>
  <source src="file.mp4" type="video/mp4" />
</video>