HTML Video

HTML Video

The <video> element in HTML is used to embed video content directly on web pages. It supports multiple formats and allows users to play, pause, and control the video using built-in browser controls.

Basic Syntax

<source> → Specifies the video file and format.
controls → Displays playback controls (play, pause, volume).
Fallback text is shown if the browser does not support the video element.

Video Attributes

Attribute	Description
`controls`	Show play, pause, volume, and other controls
`autoplay`	Start playing the video automatically (muted required in modern browsers)
`loop`	Play the video continuously
`muted`	Start the video muted
`poster`	Image displayed before video starts
`width` / `height`	Set video dimensions
`preload`	How the video should be loaded (`auto`, `metadata`, `none`)

Example: HTML Video with Attributes

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Example</title>
</head>
<body>

<h2>Video Example</h2>

<video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
Your browser does not support the video tag.
</video>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML Video Example</title>

</head>

<body>

<h2>Video Example</h2>

Your browser does not support the video tag.

</video>

</body>

</html>

Explanation:

Video starts autoplay, loops, and is muted by default.
poster="poster.jpg" → Shows an image before video playback.
Multiple sources ensure cross-browser compatibility.

Key Points

Modern HTML5 <video> eliminates the need for Flash plugins.
Use multiple formats (.mp4, .webm, .ogg) for full browser support.
Always provide controls for better user experience.
autoplay videos often need muted to work on mobile browsers.

HTML Video

HTML Video

Basic Syntax

Video Attributes

Example: HTML Video with Attributes

Key Points

You may also like...

HTML Multimedia

HTML Audio

HTML Plug ins