1

I have a webm with transparency. If the browser can't show it, I want to show an image instead.

I tried the following first:

<video autoplay loop muted>
  <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
  <img src="http://placehold.it/350x150" />
</video>

This posed two problems:

  1. Internet explorer doesn't show anything at all.
  2. Firefox shows the webm with a black background; no transparency.

I gave up a little and took to Javascript (and Modernizr):

<img ... class="shittybrowser" />
<video ... class="gloriousbrowser" style="display:none;" />

 

if(Modernizr.video.webm){
  $(".shittybrowser").hide();
  $(".gloriousbrowser").show();
}

This fixed the problem in Internet Explorer but Firefox still claims to do webm, despite only half-assing it.

How do I make sure only browsers that can display webms with transparency does so?

Blargmode
  • 1,015
  • 2
  • 10
  • 14

1 Answers1

1

You can set image as value of poster attribute at <video> element

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 shown as the poster frame.

<video autoplay loop muted poster="http://placehold.it/350x150">
  <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" 
          type="video/webm" />
</video>
guest271314
  • 1
  • 15
  • 104
  • 177
  • This is nice for handing IE without using JS, but doesn't solve the problem with Firefox. – Blargmode Aug 07 '16 at 21:17
  • _"but doesn't solve the problem with Firefox"_ Which versions of firefox have you tried playing video? The video plays at firefox 47, here. Not certain about ie – guest271314 Aug 07 '16 at 21:21
  • 2
    Firefox 48. It can play webm videos but it can't handle transparency. Test this page in Chrome and Firefox to see what I mean: http://simpl.info/videoalpha/ – Blargmode Aug 07 '16 at 21:35
  • @Blargmode Are you trying to display a static image or another video at firefox? – guest271314 Aug 07 '16 at 22:01
  • A static image. Ideally I'd like to find out if the browser supports webm videos with alpha channel, because then I could do whatever else if it doesn't. I have found a workaround for now, replacing the Modernizr if-condition in my question with this: `if(navigator.userAgent.search(/webkit/i)>0)`. If the userAgent string contains the word _webkit_ it's probably one of the browsers that can handle it. But that's an ugly way of bodging it. – Blargmode Aug 07 '16 at 22:14
  • The user agent can be changed by user. You can check for `webkit` prefix at an element property see http://stackoverflow.com/a/33350379/`, then set `` `src` to empty string, which should then display image referenced at poster attribute – guest271314 Aug 07 '16 at 22:33
  • Thanks, that's a better way of checking, but I think I'll stick with having a separate img-element and hiding it instead of stetting the video to empty. That way the image is the default if the user has disabled Javascript. – Blargmode Aug 07 '16 at 22:43