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.

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.