Presented February 12, 2011

code icon

code!

tips icon

tips!

quote icon

quote

Video for Web: Introduction

A client recently presented us with a series of video clips to be placed on their website. It is an issue I had been quietly avoiding due to my own sense that embedded video was a can of worms... with teeth. In truth it is, and it’s not. This tutorial is designed specifically to identify a workable process for adding video to your website projects that will play on most browsers and even some handheld devices. It is not an exhaustive discussion - but should give you a path to success and enough background to dig even deeper if you desire.

Trolley Power!

Download Video

Where are the standards?

At present, there is not a single standard video format or file format that will play video on all browsers. Thanks to Michael Bluejay, author of WebsiteHelpers.com, for detailing these video display browser issues.

    quote icon
  • There is no one format that works on everything:
    • Flash works on most browsers, but not on the iPhone, or the iPad (and isn’t preinstalled on post-Oct. 2010 Macs).
    • The <video> tag works on those, but not in Internet Explorer (not even v.8).
    • The <video> tag works in Safari, Chrome and Firefox, but Firefox doesn’t support .MP4 with that tag, only the more obscure .OGV
  • So you have a few choices:
    • Use a Flash player, and accept that iPhone, iPad, and newer Mac users can’t see your video. Or...
    • Use the <video> tag with an .mp4 file format, and accept that IE and Firefox users can’t see your video. Or...
    • Use the <video> tag and feed it both an .ogv file (for Firefox) and an .mp4 file (for everything else), and accept that IE users can’t see your video. Or...
    • Wrap the <object> tag for Flash video inside the <video> tag, and make both an .mp4 and an .ogv file available on your server. This will work with damn near everything, since the browser in question will use whatever it can support. Obviously this is the most-compatible solution, but it does require a little more code, and you can’t get away with having just one video file. You’ll have to make both an .mp4 version and an .ogv version.

Quoted from WebsiteHelpers.com

  • The basic procedure for adding video to your site:
    • Convert your video file to browser-compatible formats
    • Add HTML code
    • Make it efficient
» Continue: Video Conversion MP4