HTML Video Controls

HTML video controls allow users to play, pause, adjust the volume, change playback position, and manage video playback directly in a browser. These controls make videos easier to use and provide visitors with a familiar viewing experience.

HTML provides the controls attribute for displaying built-in video controls. You can add it to the <video> element without writing JavaScript.

What Are HTML Video Controls?

The controls attribute displays the browser’s built-in video player interface. Depending on the browser and device, users can access options such as play, pause, volume, fullscreen, and the playback timeline.

Here is a basic example:

<video width="600" controls>
  <source src="tutorial.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The controls attribute tells the browser to display its standard video controls. The width attribute sets the video width to 600 pixels.

Learn more about embedding videos in our HTML Video tutorial.

Common Video Control Features

When you use the controls attribute, the browser provides playback features. The exact appearance may differ between browsers and devices.

Control	Purpose
Play	Starts video playback
Pause	Temporarily stops playback
Timeline	Moves to a different part of the video
Volume	Adjusts the sound level
Fullscreen	Displays the video across the screen
Playback speed	Changes how quickly the video plays, where supported

These features are particularly useful for educational websites, video tutorials, and online learning platforms.

Adding Video Controls with HTML

You can create a complete HTML page with video controls using the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Video Controls</title>
</head>
<body>

  <h1>HTML Video Player</h1>
  <p>Use the controls below to watch the video.</p>

  <video width="600" controls>
    <source src="lesson.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </video>

</body>
</html>

Save the code as index.html and place a supported video file named lesson.mp4 in the same folder. Open the HTML file in a browser to test the player.

What Happens Without the Controls Attribute?

If you remove the controls attribute, the browser normally displays the video without its standard playback interface.

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

Visitors may not have an obvious way to start or manage playback. You can build custom controls with JavaScript, but that requires additional code and accessibility considerations.

Using Video Controls with Other Attributes

You can combine controls with other video attributes, such as poster, width, and loop.

<video width="600" controls poster="preview.jpg">
  <source src="lesson.mp4" type="video/mp4">
</video>

The poster attribute displays a preview image before playback begins.

You can also use the loop attribute to repeat a video automatically after it finishes:

<video width="600" controls loop>
  <source src="demo.mp4" type="video/mp4">
</video>

Explore our tutorials on HTML Video and HTML Media to learn more about multimedia elements.

Best Practices for HTML Video Controls

Follow these practices when adding video controls to your website:

• Use the controls attribute when visitors need to manage playback.
• Provide a supported video format and a correct file path.
• Make the video responsive on mobile devices.
• Add captions for spoken content when appropriate.
• Avoid autoplay with sound unless users have explicitly requested it.
• Test the player in different browsers and on different screen sizes.

The built-in controls attribute is a simple and effective way to make HTML videos easier for visitors to watch.