CODEWITHSUNDEEP
html5-videogifanimated-gif
Patrick from NDepend team
Patrick from NDepend team

Reputation: 13842

Best practices to fall back to GIF for browsers that don't support HTML 5 <video> tag?

I'd like to replace some <img> GIF with some <video> HTML5 tags with mp4 and webm formats. With FFMPeg I get some ratio up to 10x smaller!

<img id="imgScale" src="/Doc/VS_Arch/MyAnim.gif" />

<video autoplay loop muted playsinline>
  <source src="/Doc/VS_Arch/MyAnim.webm" type="video/webm">
  <source src="/Doc/VS_Arch/MyAnim.mp4" type="video/mp4">
</video>

However I'd like to fallback to GIF for browsers that don't support the <video> tags (looks like Internet Explorer doesn't support it from my experiments) or that don't support the mp4 / webm formats.

What are the best practices?

Upvotes: 1

Views: 1635

Answers (1)

angleKH
angleKH

Reputation: 151

You can directly place <img> tags inside the <video> tag after the track elements for fallback:

<video autoplay loop muted playsinline>
  <source src="/Doc/VS_Arch/MyAnim.webm" type="video/webm">
  <source src="/Doc/VS_Arch/MyAnim.mp4" type="video/mp4">
  <img id="imgScale" src="/Doc/VS_Arch/MyAnim.gif" />
</video>

I cannot comment on "best practices" but I can say that this use is valid by the HTML Living Standard. This is allowed because the content model for <video> allows transparent inside the <video> tag after the track elements. Browsers that do support the <video> tag will not display the <img> tag, the standard writes:

Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

Notice that the standard does not describe the fallback inside the element as "only text", as it does for elements like <noscript> with scripting enabled, but rather "content".

Note: In my browser at least, the image inside is still fetched and loaded even when the browser does support <video> elements, so this might have the opposite effect of what you are trying to achieve. You may want to use JavaScript to conditionally insert the <img> tags.

Upvotes: 2

Related Questions