HTML5 Audio Tag

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.

HTML5 most commonly used audio formats are ogg, mp3 and wav. You can use <source> tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format

Example :

	
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>The HTML5 audio Element</title>
    </head>
    
    <body>
        <audio controls="controls">
            <source src="images/html5-audio-mp3.mp3" type="audio/mpeg">
            <source src="images/html5-audio-mp3.ogg" type="audio/ogg">
        </audio>
    </body>
</html>

Output :

Audio Attributes :

Attribute	Value	Description
controls	*Boolean attribute	You need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.
autoplay	*Boolean attribute	If this guy exists, the browser will just play your song or your speech without asking permission from your visitor.
loop	*Boolean attribute	Keep repeating your music
src	url	The URL of your audio file
preload	none \| metadata \| auto	This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls". none - do not buffer audio file automatically. metadata - only buffer the metadata of audio file. auto - buffer audio file before it gets played.

HTML5 Video Tag

HTML5 <video> element provides a standard way to embed video in web pages. However, the video element is relatively new, but it works in most of the modern web browsers. The following example simply inserts a video into the HTML5 document, using the browser default set of controls, with one source.

Example :

	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The HTML5 video Tag</title>
</head>
<body>
 
<video controls>
      <source src="images/html5-video.mp4" type="video/mp4">
      <source src="images/html5-video.ogg" type="video/ogg">
    </video>
    
</body>
</html>

Output :

Video Attributes :

Attribute	Value	Description
controls	*Boolean attribute	If you want the browser native player control to be around, specifiy "controls"
autoplay	*Boolean attribute	If this guy exists, the browser will just play your video without asking permission from visitor
loop	*Boolean attribute	Keep repeating your video
src	url	The URL of your video file
preload	none \| metadata \| auto	This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls". none - do not buffer video file automatically. metadata - only buffer the metadata of video auto - buffer video file before it gets played.
width	width in pixels	Width of video player
height	height in pixels	Height of video player
poster	url of a image file	If present, shows the poster image until the first frame of video has downloaded.

HTML5 Tutorial