continue
Step 2. Native Audio & Video.

Audio and Video have been on the web for awhile now, but required the use of plugins like Flash. HTML5 gives us web designers a way of building content directly into the webpage experience, sans plugins.
The syntax for adding audio is as simple as can be.

    <audio src="audiofile.mp3>
    </audio>

The Boolean attributes: autoplay, loop, controls change the player. No "true" or "false" is required, including the attribute makes it true. Excluding it means false.
flash

backcontinue
Step 2.2 Is it really that easy?
Unfortunately nothing in this field of work is that easy. While the .mp3 file format may be popular, it is not an open standard. Because of this the smaller and open source browsers do not have the rights to play it. On top of that, Internet Explorer doesn't even support the audio tag yet!

Never Fear, fallbacks are here. By specifying a different fallback source file for each type, you can assure that everyone can view your content.
<audio controls>
  <source src="audiofile.ogg">
  <source src="audiofile.mp3">
  <object type="application/x-shockwave-flash"
  data="player.swf?soundFile="audiofile.mp3">
   <param name="movie"   value="player.swf?soundFile="audiofile.mp3">
  </object>
</audio>

backcontinue
Step 2.3 The Breakdown.
It works like this:
  • First the browser checks if it can play the .Ogg format. (Mozilla)
  • Then, it checks to see if it can play the .mp3. (Safari/Chrome)
  • And if all these checks fail, it reverts to good ol' Flash. (Internet Explorer)


backcontinue
Step 2.4 What About Video?
Lucky for you, embedding video into HTML5 works exactly the same way as audio.

    <video src="movie.mp4" controls     width="300" height"200">
    </video>

It's a good idea to set a width and height since videos, by nature, take up more space. As when handling audio, it is important to have multiple fallbacks. Safari and IE9 will take an H.264 video no problem. Chrome, Firefox and Opera all use the WebM or Theora codecs. And just like always, the ol' IEs needs Flash to play along.

backcontinue
Step 2.5 Video.

Having audio or video embedded video instead of a plugin means that other technologies, such as CSS and Javascript, will have access to it. Lets take a look at user interaction in HTML5, forms.