Science Knowings: HTML Course For Social Media

HTML Audio and Video

Previously on HTML Accessibility and Copywriting

In our last session, we delved into the crucial aspects of HTML accessibility and copywriting techniques.

Now, let's shift our focus to HTML Audio and Video!

Introducing HTML Audio and Video

HTML Audio and Video

HTML Audio and Video elements allow you to embed multimedia content into your web pages, enhancing the user experience.

What are HTML Audio and Video?

The <audio> element embeds audio content, while the <video> element embeds video content into your web pages.

Embedding Audio Files

Embedding Audio Files

To embed an audio file, use the <source> element within the <audio> element, specifying the audio file's source and format:

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

Audio File Formats Supported by HTML5

Audio File Formats
  • .mp3 (MPEG-1 Audio Layer 3)
  • .ogg (Ogg Vorbis)
  • .wav (Waveform Audio Format)

Attribute used to Embed Audio

Attributes for <audio> Tag
  • src: Specifies the source of the audio file
  • controls: Display audio player controls
  • autoplay: Starts playing the audio automatically
  • loop: Loops the audio playback

Embedding Video Files

Embedding Video Files

Similar to audio, use the <source> element within the <video> element to embed video content:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Video File Formats Supported by HTML5

Video File Formats
  • .mp4 (MPEG-4)
  • .webm (WebM)
  • .ogg (Ogg Theora)

Attributes of Video Tag

Attributes for <video> Tag
  • src: Specifies the source of the video file
  • controls: Display video player controls
  • autoplay: Starts playing the video automatically
  • loop: Loops the video playback
  • width and height: Set the dimensions of the video

Controlling Audio and Video Playback

Methods for Controlling Playback
  • play(): Starts playback
  • pause(): Pauses playback
  • stop(): Stops playback
  • currentTime: Gets or sets the current playback time

Looping Audio and Video

Looping Playback

Use the loop attribute or the loop() method to loop the playback of audio/video:

<audio loop>...
videoElement.loop = true;

Autoplay Audio and Video

Autoplay

Use the autoplay attribute or the play() method to start playback automatically:

<audio autoplay>...
videoElement.play();

Playing Audio and Video in the Background

Background Playback

Use the muted attribute or the muted property to play audio/video in the background without sound:

<audio muted>...
videoElement.muted = true;

Customizing the Appearance of Audio and Video Players

Customizing Player Appearance

Use CSS to customize the appearance of the default audio/video players:

video {
  background-color: #000;
  color: #fff;
}

Using Media Queries for Responsive Audio and Video

Responsive Audio and Video

Use media queries to create responsive audio/video players that adapt to different screen sizes:

@media (max-width: 768px) {
  video {
    width: 100%;
  }
}

Next Topic: HTML Canvas

HTML Canvas

In the next session, we'll dive into the world of HTML Canvas, a powerful tool for creating interactive graphics and animations on the web. Don't miss it! Follow us for more exciting content.