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!

2
  • 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)? Jul 5, 2011 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. Jul 6, 2011 at 18:03

2 Answers 2

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.