<

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

Published on
12,386 Points
6,386 Views
Last Modified:
Approved
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>

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>

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>

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
0
Author:webguy78
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free