HTML5 - What's New?

Video Element

One of the more useful of HTML5's new elements::

<video></video>

For multimedia content.

Provides an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent.

Source elements are used together with these elements if there are multiple streams available of different types.

That's W3C jargon, but translated it gives you an easier way to add video to your web pages.

For it to work properly on different browsers, you do have to create several versions of the same video using different file formats.

You can do that using a simple free video or audio converter.

Here's the code for HTML5:
<video controls="controls">
<source src="video/Bear.mp4" type="video/mp4">
<source src="video/Bear.webm" type="video/webm">
<source src="video/Bear.ogg" type="video/ogg">
<p>Your browser does not support the video tag.</p>
</video>

CSS for Liquid Video

video {
max-width: 100%;
display: block;
margin: 0 auto;
border: none
}

Since not all browsers support the same media types, you must provide different versions of your video for different browsers.

webm works in Opera and IE , mp4 works with Safari and ogg with Fire Fox.

You may have to provide other versions for older browsers.

Free Video converter

You will need a video converter to create the different media types.

Get a free one at SoThink

Use the Download Free Version link.

We used the free SoThink converter to convert the wmv file shown below to the media types that work in all browsers we tested.

Note: Be sure to test after placing your videos online. Some of the formats may work on your PC but not online. Test in all major browsers online.

 

*Sorry, we've removed our demos due to copyright laws. Be careful what you post folks. The internet has turned into a rat race.

 

 

For a complete list of New Elements visit W3.org