Inserting VIDEO with HTML5 and AUDIO files & making them cross browser compatible: HTML5 Video, HTML5 Audio

Do you want to insert HTML5 video into your site? This is the tutorial how to do so.

What are the main advantages of HTML5 video?

1) Have good compression, good image quality, and low decode processor use.
2) It is royalty-free
3) It is easier to understand than the old object tag and easy to customize
4) If the browser is not compatible with the video tag the user can still download the video to view it and also you can show a image if the video cannot be loaded
5) No need for specific codecs to be installed on the computer to see the video

--- HTML5 VIDEO TAGS

The following video tags are examples of code you will need to put in order to make it crossbrowswer compatible.

<video with="420" height="236" controls autobuffer autoplay >

<source src="whatver_file_name.mp4" type="video/mp4" />

<source src="whatver_file_name.webm" type="video/webm" />

<source src="whatver_file_name.ogv" type="video/ogg" />

</video>

1:
2:
3:
4:
5:
6:
7:
8:
9:

Select all Open in new window

autobuffer = Starts loading the content on the background for when the user clicks play theres no waiting

autoplay = Automaticllly plays the content without the user clicking play

controls = Shows the controls bar play, stop....

poster = display a frame of the video (as a .jpg, .png, whatever), in case the video doesn’t load for some reason. It can be a local image or elsewhere on the web

download = If the browser doesn’t know what to do with video tag, or if there is a display error, you can offer a download to the video instead

TIP: If you use Dreamweaver CS5 you can go to the Widget Browser and search for HTML5 video and look for HTML5 video player widget. This is great if you don't want to create your own layout, Dreamweaver has partnered with Kaltura to provide this widget that comes with many diferent layout colors and options to choose from to fully customize the video controls for your site. Only draw back is that the menu includes a small image with the link to the Kaltura website.

If you don’t want to use the video tag yet, then here is valid XHTML code to display a video:

<object width="400" height="200" data="http://www.example.com/video_example.swf" type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

1:
2:
3:
4:

Select all Open in new window

------------------- AUDIO ---------------------

For an audio file to play in most browsers you will need to have two versions MP3 and OGV

<audio controls="controls"> </audio>
<source src="my_audio.mp3" type="audio/mpeg"> </audio>
<source src="my_audio.ogg" type="audio/ogg"> </audio>

1:
2:
3:

Select all Open in new window

autoplay = will automatically start playing your sound or music when the page loads

loop = your file will keep repeating when its ended on a loop

controls = Shows the controls bar play, stop....

Tested software to convert into OGV & WEBM formats

If you are looking how to convert your videos into a webm format you can do so with the Miro Video Converter that is FREE

Here is the link: http://www.mirovideoconverter.com/

If you are looking how to convert your videos into a OGV try this software:

http://www.ogg-converter.net/free-download-ogg-video-converter.htm

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

30-day free trial. Register in 60 seconds.

Inserting VIDEO with HTML5 and AUDIO files & making them cross browser compatible

HTML5 Video

HTML5 Audio

Hypertext Markup Language (HTML)

About The Author

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top HTML Experts