Audio & Video

Lesson 1 of 16 Beginner Interactive

HTML5 provides native <audio> and <video> elements for embedding media without plugins.

Video Element

Supports controls, autoplay, loop, muted, and poster attributes.

Audio Element

Works similarly to video but without visual display.

Syntax

HTML

<video src="video.mp4" controls width="640"></video>

<video controls width="640">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support video.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support audio.
</audio>

Audio and Video Elements

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>Audio Player</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support audio.
    </audio>

    <h2>Video Player</h2>
    <video controls width="640" height="360">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support video.
    </video>
</body>
</html>

Try It Yourself

Practice

Exercise

Add a video element with controls and a width of 500px.

Answer

<video src="video.mp4" controls width="500"></video>

Quick Quiz

Which attribute adds play/pause buttons to a video?

autoplay

controls

poster

preload

The controls attribute adds the default video player controls.

Interview Questions

The poster attribute specifies an image to display before the video starts playing. It acts as a thumbnail or preview image for the video.

Tutorial Complete

Back to HTML