programminghead Logo

HTML Tutorial 9 : Audio and Video in HTML

Audio in HTML:-

Audio as we know is sound with the acoustic range available to humans. An Audio range frequency (AF) is an electrical alternating current within the 20 to 20,000 hertz range that can be used to produce acoustic sound.So there are fair chances you need to include audio Files like songs, speech or noises (digital audio) inside your web-pages for that case HTML Have audio Tag so user can listen audio over HTML web page.

Audio Tag:

Audio Tag used inside HTML document / web -pages to include audio Files. To include digital audio Files inside HTML documents / web -pages we have to use Audio and other html elements.

Audio <audio>:-
creates space for Audio file inside HTML web-pages we have to include this Audio file inside body Tag.

Audio Tag Syntax :


 <body> 
   <audio> </audio>
 </body>

Source <source>

Source Tag used in HTML to specify the source file for media Elements Like audio / video. Source file specifies media file from its src attribute. So we have to give our media files path inside source's src attribute and the Source tag's type attribute specifies the video file's Encoded type. Like (type="video/mp4" for video with .mp4 file extension, type="video/ogg" for video with .ogg file extension,type="video/avi" for video with .avi file extension. )

src attribute syntax :


 <audio> 
   <source src ="audio.mp3" type="audio/mpeg" >
 </audio>

Controls Audio Tag Attribute :

Controls is a audio tags attribute. it allow browser to display control buttons so user can do such thing like play/pause/Rewind/Forward and change the sound strength Note:-These control buttons will depend on your browser. Control's will work differently on different browser. media file support

multiple source tag/files

We have to use multiple source tags So we can include different types of media files. Because some media files can be unsupported for some browser for those cases we have to use multiple source Tags.

Multiple source Syntax:


 <audio controls>
  <source src="audio.Mp3" type="audio/mpeg" />
  <source src="audio.wav" type ="audio/wav" />
  your Browser does not support this audio
 </audio>

if your Browser does not support those two different types of audio file then the text after the Last source tag will be displayed on the screen.

Including Audio Example:

Including Audio Example:


<html>
 <head>
  <little>audio in HTML <little>
 </head>
 <body>

  <audio controls>
    <source src="audio.mp3" type="audio/mpeg" />
    <source src="audio.wav" type="audio/wav" />
    Audio file is unsupported by your browser 
   </audio>

  </body>
</html>

Results


Video in HTML:

Video is an Part of Multimedia/electronic medium for the recording, copying, playback, broadcasting, and display of moving visual media/Pictures frame by frame.
Most of the video are recoded or streamed at 30fps or 60fps (frames per second) and video quality measured according to pixel resolution per frame in p (progressive scan line per frame) 720p (1280×720), 1080p (1920 x 1080) 4k etc.

Video Tag:

Video Tag used inside HTML document / web -pages to include Media like Video Files. To include digital Video Files inside HTML documents / web-pages we have to use Video and other html elements.

Video <video>:- creates space for Video file inside HTML web-pages we have to include this Video file inside body Tag.

Video Tag Syntax:


 <body> 
   <video> </video>
 </body>

Including Video in HTML Example

Including Video Example:


<html>
 <head>
  <title>Including Video in HTML </title>
 </head>
 <body>

  <video controls>
    <source src="video.mp4" type="video/mpeg" />
    <source src="video.ogg" type="video/wav" />
    Video file is unsupported by your browser 
   </video>

 </body>
</html>

Results


<video> Tag:

Video tag create/specifies space for Video inside HTML Document.

<controls> Attribute:

Video controls attribute allows browser to display some controls for video file like (play/pause/volume controller/seek bar etc).
Note: there controllers 100% relies on your browser, in different browser you can see some controls missing or not working.

<source> Tah:

Source Tag used in HTML to specify the source file for media Elements Like audio / video. Source file specifies media file from its src attribute. So we have to give our media files path inside source's src attribute and the media type inside source's type attribute

<src=""> attribute:

Source tag's src attribute specifies the source/path of the video file. if your video file is saved on the same folder where your HTML file is, then you only have to give your video file's name with video extension (like .mp4/.mkv/.avi/.ogg etc). But if your video file is in another folder/directory the you have to give full file path with file name and extension (like c:/Desktop/folder/video.mp4).

<type=""> attribute:

Source tag's type attribute specifies the video file's Encoded type. Like (type="video/mp4" for video with .mp4 file extension, type="video/ogg" for video with .ogg file extension,type="video/avi" for video with .avi file extension. )

why Multiple <source> Tags:

We are using more then 1 source tags to include video files in HTML. Because some browser aren't able to play all types of video. By including more then one file with different video type/formates by using multiple source tags we can include some backup video file for unsupported browsers.

Comments

minecraft download mojang

http://tinyurl.com/y5qkm8k4
07:31 am

I'm really impressed along with your writing abilities and also with the format for your blog. Is that this a paid topic or did you modify it your self? Either way stay up the excellent quality writing, it is uncommon to see a great weblog like this one nowadays..

download minecraft pc

http://tinyurl.com/y4vevdjp
06:52 am

Hi, after reading this awesome paragraph i am too happy to share my familiarity here with friends.

minecraft download pc

http://tinyurl.com/y58ofrdd
07:03 am

I visited multiple sites however the audio quality for audio songs current at this website is actually wonderful.

g

http://tinyurl.com/y63xwozu
07:22 pm

This web site certainly has all of the info I needed about this subject and didn't know who to ask.

g

http://tinyurl.com/y4ckb3bk
08:37 am

Thanks for finally writing about >Audio and Video in HTML - Including Multimedia in HTML

minecraft download free

http://t.co/58JlLB2JE6
02:50 pm

Keep on working, great job!

download minecraft pc

http://t.co/20pGasKp0a
04:30 am

I wanted to thank you for this very good read!! I certainly enjoyed every bit of it. I have you book marked to look at new things you post_

gamefly free trial

http://tinyurl.com/y66m348x
04:32 pm

For hottest information you have to pay a visit web and on internet I found this web site as a most excellent web page for hottest updates.

gamefly free trial

http://tinyurl.com/y2be2wh3
12:03 pm

excellent put up, very informative. I'm wondering why the other experts of this sector do not realize this. You should proceed your writing. I'm sure, you have a great readers' base already!

gamefly free trial

http://t.co/5Rc47F3eqS
04:25 pm

This design is wicked! You definitely know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

gamefly free trial

http://t.co/5zXaWf8JcY
05:53 pm

I really like what you guys are up too. This sort of clever work and reporting! Keep up the great works guys I've included you guys to my own blogroll.

Write to Us