CODEWITHSUNDEEP
cssvideomobilehtml5-videomodernizr
technopeasant
technopeasant

Reputation: 7939

html5 video fallback advice (no flash)

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!

Upvotes: 1

Views: 2239

Answers (2)

Kyle Hotchkiss
Kyle Hotchkiss

Reputation: 11112

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.

Upvotes: 2

technopeasant
technopeasant

Reputation: 7939

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

Upvotes: 1

Related Questions