Download 10 Free 
HTML5 aims to standardize elements on a page and reduce the use of plugins to get the leverage more from the browser. With HTML4 you would always need a plugin, such as Flash or Quicktime, to be able to listen to music and video (think YouTube). HTML5 changes that. In HTML5, you can just put a video inside some ‘video’ tags (as easy as you would put an image inside an ‘img’ tag) and, voila! Instant video action.
In this article, we will give you an overview to the two main media tags that you can use with HTML5: <audio> & <video>
The <audio> Tag
The audio tag allows you to put a music file directly into the HTML code without the use of a plugin, such as Flash or Javascript. There are three types of audio formats that are compatible with this tag: .ogg, .mp3 and .wav. However, some of these file types will only work with certain browsers. Here is a handy chart to show you which files are compatible with each browser.
|
IE
|
Firefox
|
Opera
|
Chrome
|
Safari
|
|
|---|---|---|---|---|---|
|
OGG
|
No
|
3.5+
|
10.5+
|
3.0+
|
No
|
|
MP4
|
9.0+
|
No
|
No
|
3.0+
|
3.0+
|
|
WAV
|
No
|
3.5+
|
10.5+
|
No
|
3.0+
|
Take care when using this tag! Make sure that the audio is not set to auto-play, or even auto-load – Give the user the choice of visiting your website in silence. Also, don’t make the music excessively loud. JUST LIKE IF I WERE TO WRITE THIS WHOLE ARTICLE IN CAPITAL LETTERS, IT WOULD TURN YOU OFF READING THE REST OF IT. (But, please keep on reading. I won’t do that again.)
One possible use of this tag could be for bands who want to get their music known, so they stick it up on an HTML5 compatible website.
Example Code
<audio src="audio.mp3" controls="controls">Your browser does not support the audio element</audio>
Example
Music Source
Try the audio code here →
The <video> Tag
One of the more exciting tags is the video tag. There has never before been a standard for video formats on the web. HTML5 is going to change all that.
Again, there are only three video formats that are supported with the <video> tag, they are: .ogg, MPEG4 and WebM. Here is another chart it show you which browsers are compatible with each format.
|
IE
|
Firefox
|
Opera
|
Chrome
|
Safari
|
|
|---|---|---|---|---|---|
|
OGG
|
No
|
3.5+
|
10.5+
|
5.0+
|
No
|
|
MP4
|
9.0+
|
No
|
No
|
5.0+
|
3.0+
|
|
WebM
|
No
|
No
|
10.6+
|
6.0+
|
No
|
As opposed to what I had said about the <audio> tag, you could should set the <video> tag to auto play for the video. The only caveat is that you must start the video in mute (explained below), or at least in a low volume. At least the user will have a visual warning before the sound starts. You could even start the video off in muted audio if you want.
The only problem that I can see with this tag is if the video file is too large. Due to people wanting immediate action whenever they arrive onto a site. They don’t want to be waiting for 3 minutes, they could get bored of waiting and end up skipping the video altogether.
One possible use of this tag would src=”https://speckyboy.com/wp-content/uploads/2011/04/. You could make a nice Flash animation, render it as a MPEG4 and set it to autoplay on one of your clients’ sites.
Example Code
<video src="video.mp4" controls="controls">Your browser does not support the audio element</video>
Example
Try the video code here →
Guidelines about Attributes
1. I don’t want to hear music right away when I go onto a website. As I had said before, users should get the choice if they want to listen to music or not. One of the guidelines that I would have to set would be to never use the audio autoplay="autoplay" attribute.
This also applies to video on the website. Always have the audio=muted attribute for the video tags, unless you really want to surprise them with the sound from the video.
2. Another guideline would be to have controls="controls" attribute in any use of the <video> or <audio> tag. Again, it’s all about the user having control with what they want to see or hear on the website. The only exception would have to be if you were using a video as a constant animation, then you wouldn’t need this control attribute.
3. To stick a video or an audio file into a webpage, remember the "src" attribute. It works exactly as if you were to put an image into a web page.
Conclusion
Some would argue that these two media tags are the most important part of HTML5. They allow people with basic HTML5 experience to add dynamic elements on the page without having to resort to using complex Javascript or Flash coding. Designers have to keep up with the development of new tools and update their tool box. It’s a new thing to learn in a discipline where we have to keep learning. So jump to it before HTML6 comes out!
Related Topics
Top