<

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

Published on
12,335 Points
6,335 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
Comment
Author:webguy78
0 Comments

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month