- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
HTML Audio and Video
HTML Audio
An audio file is used to store audio data on various data, such as a computer system, mp3 players, and mobile phones.
To store an audio data, you need to convert it into a digital format. The process of converting audio data into a digital file is called encoding of the raw audio data. It involves taking samples of audio data and storing them in a compressed format to reduce the file size.
An audio player decodes these compressed sample files to make the audio waves audible. The process of converting a digital file into the audio data is known as decoding. A codec is performs the encoding and decoding of the raw audio data.
List of Commonly Used Audio File Formats
The table given below lists commonly used audio file formats:
Format | File Extension | Description |
---|---|---|
MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers |
WMA | .wma | WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers |
RealAudio | .rm .ram |
RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers |
WAV | .wav | WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5 |
AAC | .aac | AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers |
MP3 | .mp3 | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers |
Ogg | .ogg | Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5 |
MP4 | .mp4 | MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers |
HTML <audio> tag
To play an audio file in HTML, use the <audio> tag.
Let's look at the following example, to know how to embed audio files into your web page.
<audio controls> <source src="songs.ogg" type="audio/ogg"> <source src="songs.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
HTML Audio Working
The controls attribute adds audio controls, like play, pause, and volume.
Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> tag.
Multiple <source> tags can link to different audio files. The browser will use the first recognized format.
HTML Video
A video file is a collection of images that is displayed in a sequence representing scenes in motion.
Similar to the audio file system, video files are also encoded or decoded using the various video codecs, such as DivX and QuickTime.
List of Commonly Used Video File Formats
The table given below lists commonly used video file formats.
Format | File | Description |
---|---|---|
MPEG | .mpg .mpeg |
MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4) |
MPEG-4 or MP4 |
.mp4 | MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube |
AVI | .avi | AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers |
QuickTime | .mov | QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4) |
Flash | .swf .flv |
Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers |
RealVideo | .rm .ram |
RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers |
WMV | .wmv | WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers |
WebM | .webm | WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5 |
Ogg | .ogg | Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5 |
HTML <video> tag
To show a video in HTML, use the <video> tag. Let's look at the following example, to know how to embed video into your webpage.
<video width="320" height="240" controls> <source src="song.mp4" type="video/mp4"> <source src="song.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
HTML Video Working
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
Text between the <video> and </video> tags will only display in browsers that do not support the <video> tag.
Multiple <source> tags can link to different video files. The browser will use the first recognized format.
HTML <video> Autoplay
To start a video automatically use the autoplay attribute.
Let's look at the following example, to know hot to embed video and set to autoplay when web page loads.
<video width="320" height="240" autoplay> <source src="songs.mp4" type="video/mp4"> <source src="songs.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
« Previous Tutorial Next Tutorial »