HTML CSS Exercise: HTML5 Audio & Video

Last update on March 04 2024 06:50:52 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE HTML><!-- Specifies the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<head>
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS Audio/Video exercise</title><!-- Sets the title of the webpage -->
</head>
<body>
<video controls><!-- Begins the video element with controls -->
<source src="big_buck_bunny.mp4" type="video/ogv"><!-- Specifies the source of the video in Ogg format -->
<source src="big_buck_bunny.mp4" type="video/mp4"><!-- Specifies the source of the video in MP4 format -->
  Your browser does not support the <code>video</code> element. <!-- Displays a message if the browser does not support the video element -->
</video><!-- Ends the video element -->
</body>
</html>

Explanation:

This HTML code embeds a video player into a webpage.
It uses the <video> element to define the video player.
The controls attribute adds playback controls (play, pause, volume, etc.) to the video player.
The <source> elements specify different video formats (ogv and mp4) for cross-browser compatibility.
If the browser does not support the <video> element, the fallback message "Your browser does not support the <code>video</code> element." is displayed.

Live Demo :

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

Supported browser


Yes	Yes	Yes	Yes	Yes