Display fallback image even if the browser supports html5 video

Question

This might sound strange, but can I still display fallback image in that case?

Since video elements in mobile (Android & iOS) will open its native video player app when clicked, I want to show GIF version of the video (which I will place as the fallback image) for Android & iOS. I know how to detect whether the browser is mobile or not via Javascript, I just need some advice on best practice.

What I'm doing

<video>
    <source mp4>
    <source ogg>
    <source webm>
    <img src="*.gif">
</video>

Then in the js

if(site.isMobile()){
    $('video').hide();
    $('video img').show();
}

Of course it doesn't work since the img is inside video. I figure I can clone the img and append it before the video element and then hide the video element, something like this :

if(site.isMobile()){
    $('video img').clone().prependTo('video'); // just some pseudocode
    $('video').hide();
}

Is it a good practice though? Is there any simpler solution?

Answer 1

poster may be what you're looking for:

Poster: A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame. -Via https://developer.mozilla.org/en-US/docs/HTML/Element/video

Example:

<video width="316" height="161" poster="https://i.stack.imgur.com/BfXRi.png" controls>
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Answer 2

Try this-

if(site.isMobile()){
    $('video *').hide();
    $('video img').show();
}

rather than creating a copy of the image.