logo
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.