Course Content
Ultimate HTML
Audio and Video
Audio
We can embed audio on a web page using <audio>
element. Here is an example:
index.html
index.css
index.js
In this example we have.
audio
element contains twosource
elements, which specify the URLs and file types of the audio files. All modern browsers support one of these formats mp3 or ogg.controls
attribute displays standard playback controls such as play, pause, and volume.- The final line of the code is a fallback message that will be displayed if the user's browser does not support the
audio
element.
Let's consider some other of the most commonly used attributes for the HTML audio element:
autoplay
- starts playing the audio file as soon as the page loads;loop
- causes the audio file to loop continuously;muted
- mutes the audio by default;volume
- specifies the default volume level for the audio file. The value can range from 0.0 (silent) to 1.0 (full volume);
Video
We embed video on a web page with help of <video>
element. Here's an example:
index.html
index.css
index.js
In the example we deal with:
video
element contains twosource
elements, which specify the URLs and file types of the video files. There are several popular video formats to choose from for the browser: webm, mp4 and ogg;controls
- attribute displays standard playback controls such as play, pause, and volume;- The final line of the code is a fallback message that will be displayed if the user's browser does not support the
video
element.
Here are some of the most commonly used attributes for the video
element:
autoplay
- starts playing the video file as soon as the page loads;loop
- causes the video file to loop continuously;muted
- mutes the audio by default;volume
- specifies the default volume level for the audio file. The value can range from 0.0 (silent) to 1.0 (full volume);poster
- specifies the URL of an image to display as the video thumbnail before the video is played;width
andheight
- specifies the width and height of the video player in pixels;
Note
Additionally, there are many JavaScript libraries and APIs available that provide additional functionality for playing and manipulating video content on the web.
Is it possible to implant audio and video on a web page?
Select the correct answer
Section 4.
Chapter 4