RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html5-video/ below:

HTML Video - GeeksforGeeks

HTML Video

Last Updated : 05 Jun, 2025

The <video> element in HTML is used to show video content on web pages. It supports various video formats, including MP4, WebM, and Ogg. It is introduced in HTML5.

Scroll down to the End, there is a Tutorial Video which is a live example of the Video Element displaying on this webpage.

Syntax:

<video src="" controls>   </video>
               or
<video controls="controls">
<source src="video_filename" type="video_type">
 </video>

Generally, we prefer the syntax with the <source> tag wrapped between the video tag because:

It allows you to specify multiple <source> elements for different formats of the video (e.g., MP4, WebM, Ogg), improving cross-browser compatibility.
By including the type attribute, you can tell the browser the exact MIME type of the video file, helping it determine whether it can play the file.

Key Attributes of the <video> Element

The following attributes can be used with the <video> tag to enhance video playback:

Attribute Description controls Adds playback controls such as play, pause, volume, etc. width Specifies the width of the video player. height Specifies the height of the video player. autoplay Automatically starts playing the video when it's loaded. muted Mutes the video by default. src Specifies the video file’s path. type Defines the format of the video (e.g., video/mp4, video/webm).

Below is an example of using different attributes of video tag:

HTML


 <html>
<body>
<video controls="" height="240" width="320">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"/>
   Sample Video
        </video>
</body>
</html>

The <video> tag defines the video player, with width and height attributes setting its dimensions.
The controls attribute adds playback controls like play, pause, and volume.

Supported Formats

Three different formats are commonly supported by web browsers - mp4, Ogg, and WebM. The table below lists the formats supported by different browsers:

Browser MP4 WebM OGG Google Chrome Yes Yes Yes Internet Explorer Yes No No Firefox Yes Yes Yes Opera Yes Yes Yes Safari Yes Yes No More Examples of HTML video

Example 1:

HTML


 <html>
<head>
<style>
   video {
			max-width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
		}
        </style>
</head>
<body>
<video controls="" poster="https://via.placeholder.com/640x360.png?text=Video+Loading">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"/>
</video>
</body>
</html>

The video is made responsive with CSS, adjusting its width to 100% of its container while maintaining the aspect ratio.
The poster attribute displays a placeholder image before the video loads or plays, enhancing the user experience.

Example 2:

HTML


 <html>
<head>
<style>
   video {
			width: 640px;
			height: 360px;
			border: 2px solid #4CAF50;
			border-radius: 8px;
			background-color: #000;
		}
        </style>
</head>
<body>
<video autoplay="" controls="" loop="" muted="">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20241202174008478068/sample-vedio.mp4" type="video/mp4"/>
</video>
</body>
</html>

The video is styled with a green border, rounded corners, and a black background to enhance its appearance.
The autoplay, loop, and muted attributes ensure the video plays automatically, repeats indefinitely, and starts without sound, respectively.

Best Practices for Video Implementation

To ensure your videos are displayed correctly across all browsers, follow these best practices:

1. Use Multiple Video Sources

Since not all browsers support the same video formats, it's a good idea to provide multiple video formats (MP4, WebM, Ogg) in the <video> element. This will ensure that the video plays regardless of the browser the user is using.

<video controls> 
<source src="example.mp4" type="video/mp4"> 
 <source src="example.ogg" type="video/ogg"> 
<source src="example.webm" type="video/webm"> 
Your browser does not support the video tag. 
</video>

2. Optimize Video Size and Quality

To enhance user experience, make sure your videos are optimized for the web. Compress your video files without sacrificing too much quality. Use appropriate file sizes for faster loading times.

3. Implement Accessibility Features

Add captions, subtitles, or other accessibility features to make your videos more inclusive. You can use the <track> element to provide captions in various languages.

<video controls>
    <source src="example.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    Your browser does not support the video tag.
</video>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4