Archive for the ‘html5’ Category

Internet Explorer 8 (and earlier) doesn’t understand the new HTML5 elements.

To use the HTML5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a JavaScript that creates the new elements used in HTML5:

<script>
document.createElement("article");
document.createElement("section");
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
</script>

If we put these JavaScript commands at the top of our web page, we can now use the ARTICLE, SECTION, NAV, HEADER, and FOOTER elements and know that IE will render them appropriately.

Prior to the HTML5 specification, there didn’t exist any standard way of displaying video content on web sites. Some video tools used the EMBED tag; others used OBJECT — and all required the visitor to download and install a plugin (like QuickTime or RealPlayer).

With the advent of HTML5, there is a new standard way: the VIDEO tag. Support for the VIDEO element is still evolving, so it doesn’t work yet on all browsers.

VIDEO ELEMENT SUPPORT

• IE: 9.0+
• FIREFOX: 3.5+
• SAFARI: 3.0+
• CHROME: 3.0+
• OPERA: 10.5+
• IPHONE: 1.0+
• ANDROID: 2.0+

To further complicate matters, no one codec is supported across browsers. Some support mp4, others webm, others ogg. Here’s the current lay of the land:

VIDEO CODEC SUPPORT

• IE: WebM and MP4
• FIREFOX: OGG and WebM
• SAFARI: MP4 (and other formats if their QuickTime plugins are also installed)
• CHROME: OGG and WebM
• OPERA: OGG and WebM
• IPHONE: MP4
• ANDROID: MP4 and WebM

For maximum compatibility, the video workflow wil be:

1. Make one version that uses WebM (VP8 + Vorbis).
2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
3. Make another version that uses Theora video and Vorbis audio in an Ogg container
4. Link to all three video files from a single VIDEO element, and fall back to a Flash-based video player

The final markup uses a VIDEO element for HTML5 video, a nested OBJECT element for Flash fallback, and a small bit of script for the benefit of Android devices:

For more information, visit http://diveintohtml5.info/video.html, from which parts of this posting were taken from (CC license agreement).

One of the biggest problems with video and the Web today is that each web browser supports different video formats. So if you create a video, and only upload one video type, chances are many people trying to watch your video will be unable to do so.

As of now, here are the browsers and their native support of video:

• Mozilla Firefox: OGG, WebM, Flash
• Opera: OGG, WebM, Flash
• Chrome: OGG, WebM, Flash
• Safari: MP4 (H.264), Flash
• iPhone/iPad Safari: MP4 (H.264)
• Android: MP4(H.264), Flash

So, to make sure you’ve covered all the bases, it would be best to make a copy of your video in the WebM format, one that uses the MP4/H.264 format, one that uses the OGG format, and another that uses the Flash format.

Fortunately, there are tools that can help easily convert your video into multiple formats.

Here are 3 of them:

• Miro Video Converter – Free, open source tool for both Macintosh and Windows
• Handbrake – Another free, open-source tool for both Macintosh and Windows
• FireOGG – Free, open-source plug-in for the Firefox browser to create video in the OGG format

For more tips like this, come to our video class and our forthcoming HTML5 class!

• Creating and Basic Editing of Video for the Web (June 18, 2011: 9-noon)
• HTML5: Don’t Fall Behind – Start Using it Now! (August 22, 2011: 1-4pm)