course content

Course Content

Ultimate HTML

Audio and VideoAudio and Video

Audio

We can embed audio on a web page using <audio> element. Here is an example:

html

index.html

css

index.css

js

index.js

In this example we have.

  • audio element contains two source 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:

html

index.html

css

index.css

js

index.js

In the example we deal with:

  • video element contains two source 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 and height - 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.

question-icon

Is it possible to implant audio and video on a web page?

Select the correct answer

Section 4.

Chapter 4