HTML5: How to specify that video controls should be displayed?

Last update on February 14 2024 12:55:53 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify that video controls should be displayed </title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<video width="320" height="200" controls><!-- Video element with specified width, height, and controls attribute -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.mp4" type="video/mp4"><!-- Source of the video in MP4 format -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.ogg" type="video/ogg"><!-- Source of the video in OGG format -->
</video><!-- End of video element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code defines a video element using the <video> tag.
Attributes such as width, height, and controls are used.
The controls attribute specifies that video controls should be displayed, allowing users to play, pause, and adjust the volume of the video.
Within the <video> tag, <source> tags are used to specify different video formats (MP4 and OGG) using the src attribute and the corresponding MIME type using the type attribute.
This code creates a video player with controls enabled, allowing users to interact with the video playback.

Live Demo:

See the Pen video-controls-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page