Category: Video

HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />



Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.

Promoting Your Business on the Web

You have the name, you got your cards and now you need a website?  Yes, now everything is now shifting to the internet and has been for a few years.  Utilizing the internet as a marketing avenue for your company is important.  Not only will it allow your company to reach a larger audience, but it will allow you to reach out to your clients in several different ways, and here are just some of the benefits…

Internet Bandwagon?
So you have cards to promote, what more do you need?  Well for one most potential customers are now “Google-ing” instead of looking though a yellow phone book.  Rather than calling they are viewing company website’s to better research the topic or services that they are after as websites tend to be more in-depth than a phone call.  But you cannot just throw a site up into cyber space, you need the company to be branded, have the same look/feel  on all marketing materials where it be cards, print collateral and finally a website, all should be branded the same so that customers  do not get confused or think that the company is not legit .

Social Connection?
Although the internet has been around for a few decades, only in the 1990s did it explode onto more local mainstream homes, than in the 2000s we get introduced to “Social Networks” mySpace, Facebook, Digg and many others. At first glance many saw these as “tween” sites where teens/ young adults join and connect but then the dynamics changed and in the past three years there has been a growing trend for Celebrities’  to “connect” with their fans.   Another step in the social network trend was the introduction to Twitter, a simple 140 character limit to “tweet”.  Twitter grew unexpectedly and is still going strong.

Soon after they started to grew in popularity did business start to use social networks as a “tool” to connect with their customers, clients and of course fans.  Nowadays most businesses have a Facebook page, a twitter accounts to stay up to date and promote their business to viewers.