Adding video to a webpage is easy with the <video> tag, but there's a catch. By default, a video has no buttons. No play, no pause, no volume. It's just a static frame or an inaccessible box.

Let's define a basic video element. We provide a source using the 'src' attribute. This tells the browser where to find the movie file. But look at the preview... you can't interact with it.

<video src="/videos/sample.mp4"></video>

This is what happens in the browser. It loads the first frame, but the user is stuck. They cannot watch the content.

<video src="/videos/sample.mp4"></video>

To fix this, we need the 'controls' attribute. This is a boolean attribute, meaning it doesn't need a value like ='true'. Just writing the word is enough.

<video src="/videos/sample.mp4" controls></video>

Now, the browser provides its default interface. Play, pause, timeline, and volume. This ensures users on any device can control their viewing experience.

<video src="/videos/sample.mp4" controls></video>

Checkpoint: Which attribute tells the browser to show the play/pause buttons?

<video src="movie.mp4" ???></video>

The same logic applies to audio. The <audio> tag works just like video. Without 'controls', an audio element is invisible on the page because it has no visual component.

<audio src="/audio/song.mp3" controls></audio>

You can combine attributes. 'controls' can live alongside 'autoplay', 'muted', and 'loop'. But remember, 'controls' is essential for accessibility.

<video src="/v/clip.mp4" controls muted loop></video>

Ready to take control? We've prepared interactive challenges to test your skills in enabling and managing media interfaces.

controls.html

1 / 9

⏯️

Tutor:Adding video to a webpage is easy with the <video> tag, but there's a catch. By default, a video has no buttons. No play, no pause, no volume. It's just a static frame or an inaccessible box.

⭐ 0 EXP

Control Mastery

Unlock nodes by mastering multimedia attributes.

Concept 1: The Video Element

The <video> element is used to embed video content. You point it to a file using the src attribute.

System Check

What is the primary attribute to define the video file location?

hrefsrclinksource

Community Holo-Net

Showcase Your Player

Built a custom video player layout? Share your HTML structure.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

The Power of Controls

Pascual Vila

Frontend Instructor.

When embedding media in HTML, the content is locked by default. The controls attribute is the key that unlocks interaction, giving the user the power to play, pause, and adjust volume.

The Video Tag

The <video> element embeds a media player. Without attributes, it displays the first frame of the video but offers no interactivity. Adding controls renders the browser's native video player interface.

The Audio Tag

Unlike video, the <audio> tag has no visual component by default. If you forget to add the controls attribute, the audio player will be completely invisible on the page, rendering it useless unless controlled via JavaScript.

Boolean Attributes

Attributes like controls, autoplay, loop, and muted are "boolean attributes". Their presence represents true, and their absence represents false. You do not need to write controls="true".

Media Glossary

controls: A boolean attribute that, when present, specifies that the browser should provide controls for the user to interact with the video/audio (play, pause, volume, etc.).
video: The HTML element used to embed video content in a document, such as a movie clip or other video streams.
autoplay: A boolean attribute that makes the video start playing automatically as soon as it is ready. Note: Most browsers block autoplay unless the video is also muted.
loop: A boolean attribute that specifies that the media file will start over again, every time it is finished.

📖 INDEX