1

I'm looking for a creative way to replace an HTML5 video with an image under a few circumstances. Don't want to deal with flash or anything like that to make the video work... would rather give them an image.

Give them the image if:

  1. If the desktop browser doesn't support HTML5 video

  2. If the user is mobile

Seems simple... especially by using Modernizr for css tags with display:none; if the video isn't supported ... so here's the caveat: The HTML5 video is edge to edge and centered to the screen with JavaScript and I'd like the image to have the same behavior.

My initial thought was simple: poster attribute. Works on an iPad and iPhone 3/3gs, but is playable on an iPhone 4.. Also, doesn't work on IE, which apparently says "I don't know what this is" and doesn't even bother with the poster.

I've got a test set up at http://kzmnt.com/test/

Looking forward to your advice!

franzlorenzon
  • 5,845
  • 6
  • 36
  • 58
technopeasant
  • 7,809
  • 31
  • 91
  • 149
  • Just out of curiosity, why don't you want your video to play on mobile? And what would you consider mobile (tablets, smart phones, older crap phones, netbooks, PSP)? – sdleihssirhc Jul 05 '11 at 20:18
  • 1
    The video's pretty large and in charge.. and takes the entire background. Aside from iOS behavioral differences on iPad vs iPhone 4 vs iPhone 3G/3Gs, I think it's kind of rude to hit someone with a data plan with a video they didn't have the option of watching. – technopeasant Jul 06 '11 at 18:03

2 Answers2

2

You can check if HTML5 video is supported with the following:

function supports_h264_baseline_video() {
 if (!supports_video()) { return false; }
 var v = document.createElement("video");
 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

As far as mobile goes, try using some media queries.

The above code is from http://diveintohtml5.ep.io/detect.html#video-formats.

DanBeale
  • 310
  • 4
  • 15
Kyle Hotchkiss
  • 10,754
  • 20
  • 56
  • 82
1

Used a media query after about 1100px and replaced it with an image using css background size set to cover!

technopeasant
  • 7,809
  • 31
  • 91
  • 149