Grow your CSS skills. Land your dream job.

Cross-Browser HTML5 Video and Audio

Published by Chris Coyier

MediaElement.js is a jQuery-based package for allowing us to:

  1. Use the HTML5 elements <video> and <audio> and have them work cross-browser (including mobile WebKit)
  2. Deliver a consistent UI for controls
  3. Using only a single format

I'll be using it in the redesign of this site. I was all prepared to just say I'm using HTML5 video and if your browser doesn't support that then just download directly and use VLC or something. But then I realized I'd have to re-encode to at least include OGG and that really didn't appeal to me with 90 videos. Plus then I was messing with trying to make the video fluid width and that wasn't going well (another story) so I scrapped it. Now that we have this, it's a done deal! Firefox/Opera/IE<8 will fall back to a Silverlight player and WebKit browsers (and ultimately IE 9) will use native HTML5.

One issue I've heard is that even when visiting a site using this with Chrome/Safari (natively supporting HTML5 with H.264), you can be prompted to install or update Silverlight, which kinda sucks. Apparently I have the lastest version installed so could not confirm this.

Direct Link →

*May or may not contain any actual "CSS" or "Tricks".