HTML5 Audio and Video

HTML5 provides built-in elements for adding audio and video directly to a webpage. The two main elements are <audio> and <video>.

1. Audio and Video at a Glance

2. The audio Element

The <audio> element is used to embed sound content such as music, voice recordings, podcasts, and other audio files.

A simple example is:

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

The controls attribute tells the browser to display playback controls.

3. Audio Controls

Without the controls attribute, the browser does not normally display its standard playback controls.

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

Depending on the browser, the controls can provide options such as play, pause, volume, and playback position.

4. Multiple Audio Sources

A source can be provided using the <source> element. Multiple sources can be listed so the browser can use a compatible one.

<audio controls>

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

    <source src="lesson.ogg"
            type="audio/ogg">

</audio>

5. Audio with Autoplay

The autoplay attribute requests automatic playback.

<audio controls autoplay>

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

</audio>

Modern browsers may restrict automatic playback, especially when sound would begin without user interaction.

6. Audio with Loop

The loop attribute causes the media to start again when it reaches the end.

<audio controls loop>

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

</audio>

7. Muted Audio

The muted attribute starts the audio in a muted state.

<audio controls muted>

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

</audio>

8. The video Element

The <video> element is used to embed video content directly into a webpage.

<video controls width="500">

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

</video>

The browser can provide controls for playing and managing the video.

9. Video with Width and Height

The size of a video can be controlled using attributes such as width and height.

<video controls
       width="600"
       height="350">

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

</video>

10. Video Poster

The poster attribute specifies an image that can be displayed before the video starts playing.

<video controls
       poster="thumbnail.jpg"
       width="600">

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

</video>

A poster image is useful because it gives users a visual preview before playback starts.

11. Video with Multiple Sources

<video controls width="600">

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

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

</video>

12. Video with Autoplay

The autoplay attribute requests automatic playback.

<video controls autoplay>

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

</video>

Browser policies can affect whether autoplay is actually allowed.

13. Video with Loop and Muted

These attributes are often combined when a video should repeat continuously and start without sound.

<video controls
       autoplay
       loop
       muted>

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

</video>

14. Audio vs Video

15. Fallback Text

Text can be placed inside an audio or video element as fallback content for browsers that cannot use the media element.

<video controls>

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

    Your browser does not support video playback.

</video>

16. Audio and Video Attributes

17. Example: Training Video

A training website can use the video element to show recorded lessons.

<video controls
       poster="html-course.jpg"
       width="700">

    <source src="html-lesson.mp4"
            type="video/mp4">

    Your browser does not support video playback.

</video>

18. Example: Training Audio

Audio can be useful for voice lessons, podcasts, or recorded explanations.

<audio controls>

    <source src="html-explanation.mp3"
            type="audio/mpeg">

    Your browser does not support audio playback.

</audio>

19. Common Mistakes

Mistake 1: Forgetting controls

Without controls, users may not see the standard playback interface.

Mistake 2: Providing the wrong file type

The file format and declared MIME type should match the media file.

Mistake 3: Depending on autoplay

Autoplay behavior can be restricted by browsers, especially for media that starts with sound.

Mistake 4: Forgetting fallback content

Providing fallback text gives users a useful message when the media element cannot be played.

20. Best Practices

• Use controls when users need to control playback.
• Provide appropriate media formats and MIME types.
• Use poster images for videos when a preview is useful.
• Do not depend on autoplay for important content.
• Provide fallback text where appropriate.
• Use captions and accessibility features for video content when required.
• Keep media file sizes optimized for reasonable loading performance.

21. Practice Example

Create a simple HTML page containing one audio lesson and one training video.

<h2>
    HTML Audio Lesson
</h2>

<audio controls>

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

    Your browser does not support audio.

</audio>


<h2>
    HTML Video Lesson
</h2>

<video controls
       width="600"
       poster="lesson.jpg">

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

    Your browser does not support video.

</video>