Earlier, native web technologies such as HTML didn't allow embedding video and audio on the Web. Plugin-based technologies became popular for handling such content, but they had many problems, including not working well with HTML/CSS features, security and accessibility issues. Later, HTML5 specification introduced such features with the <video> and <audio> elements.
The <audio> element is used to embed audio files to a web page, and the <video> element is used to embed a video.
How to Add Audio on the Web Page
Before HTML5, audio files were added to the page by integrating background sound with the help of <bgsound> tag. The file was played while the page was viewed, and the user couldn’t mute the sound. In HTML5, we can embed audio files using the <audio> tag, and there is no need to connect third-party plugins. The audio element can be controlled with HTML or Javascript and styled with CSS.
In the code, the src attribute refers to the URL of the audio file, and the controls attribute adds a control panel (launch button, scroll bar, volume regulator).
<audio src="name.ogg" controls></audio>Audio Codecs and Audio File Formats
As not all browsers support all audio formats, the audio file is encoded/decoded with an audio codec (a digital electronic device or computer-based software application that aids in the compression and decompression of a digital audio data). All formats of audio files are added simultaneously via the <source> element with the src attribute.
When defining different file formats, we recommend to define MIME-type for each file, in order to let the browser localize supported file. The MIME-type is defined by the help of the type attribute.
Example of adding different formats of audio files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
<source src="/build/audios/audio.mp3" type="audio/mpeg">
</audio>
<p>Click the play button</p>
</body>
</html>The most popular audio formats are the following ones:
MP3 – the most popular audio format, which uses lossy compression and permits to reduce the file size. Despite the popularity among the users, TV companies and radio stations use more modern codecs ISO-MPEG, like AAC or MPEG-H.
AAC (Advanced Audio Codec) — closed codec, MP3 analog, but comparing to the latter, it provides higher quality with the same or stronger compression degree.
Ogg Vorbis— free format with an open code, supported in Firefox, Opera and Chrome. Provides good quality sound, but not sufficiently supported by device players.
How to Add Video Files
In previous version of HTML, videos were embedded into the site via third-party plugins, such as QuickTime, RealPlayer or Flash. HTML5 has a new <video> tag, which is used to insert a video into the web page.
In a code, it looks like this:
<video src="example.webm" controls></video>The src attribute indicates the URL of the file, and the controls attribute is used to display control elements.
Video Codecs and Video File Formats
Each browser supports particular codec, that’s why, in order to provide video playback in all browsers, the video file must be placed in a few formats. Like in the case of audio files, all formats of video files are included in the <source> element, starting with the most preferred one. Every video file must have its MIME-type, which is defined by the type attribute.
To make sure, that the browser can process video files, create a file .htaccess in the folder, where the web site is situated, which defines MIME-types for a video.
Example of adding different formats of video files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Today there are 3 basic video formats: MP4/MPEG-4, OGG and WebM +. For video data compression and their playback, we use codecs.
For a video file of the MPEG-4 format, the Н.264 video codec and ААС audio codec are used. If you want to use codecs, you must get a license.
For the Ogg video file, use the Theora video codec and the Vorbis audio codec with an open code.
For the video files of the WebM + format, use the VP8 video codec and the Vorbis audio codec. In this case, a license is not required.
Most servers don't serve Ogg or mp4 media with the correct MIME types. For this, you may need to add the appropriate configuration.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4How to Add Subtitles and Headings
Subtitles and headings are added to audio and video files via the <track> element, which is used as a child element of <audio> and <video>.
Example of adding subtitles and headings to audio and video files:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Audio and Video Attributes
| Attribute | Description |
|---|---|
| autoplay | Allows the audio/video to automatically start playing while the rest of the page is loading. |
| autobuffer | Allows the audio/video to automatically begin buffering. |
| controls | Allows controlling the audio/video playback, including volume, pause/resume playback. |
| loop | Allows the audio/video to play again whenever it finishes. |
| muted | Makes the media play with the turned off sound by default. |
| preload | Specifies buffering large files. It can have one of these values: |
| "none", which does not buffer the file. | |
| "auto", which buffers the media file. | |
| "metadata", which buffers only the metadata for the file. | |
| src | The URL of the audio/video to embed. It is optional. |
| poster | This is a URL of an image displayed before the video is played. |
| width | Specifies the display area width of the video, in CSS pixels. |
| height | Specifies the display area height of the video, in CSS pixels. |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.