WikiGalaxy
HTML Video
HTML provides the
<video> element to embed video files directly into web pages.
Videos enhance user experience by adding visual and interactive content. Let’s explore the HTML Video chapter in-depth with examples, explanations, and output descriptions.
Basic Video Embedding
<video>:
Specifies the video container.
width and height:
Sets the dimensions of the video player.
controls
Adds playback controls like play, pause, volume, etc.
<!DOCTYPE html>
<html>
<head>
<title>Basic Video Embedding</title>
</head>
<body>
<h1>Basic Video Example</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
<source>:
Specifies the video file and format.
FallBack Text:
- The fallback text is displayed if the browser doesn’t support the
<video>tag.
Output:
Displays a video player with controls, allowing users to play the video.
Adding Multiple Video Formats
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video Formats</title>
</head>
<body>
<h1>Video with Multiple Formats</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.ogg" type="video/ogg">
<source src="sample.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
The video plays seamlessly across various browsers, as one of the formats will be compatible.
Video with Poster and Autoplay
<!DOCTYPE html>
<html>
<head>
<title>Video with Poster and Autoplay</title>
</head>
<body>
<h1>Video with Poster and Autoplay</h1>
<video width="640" height="360" controls autoplay>
<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>
poster:
Displays an image before the video starts playing. Example:
poster="poster.jpg".
autoplay:
Automatically starts playing the video when the page loads.
Output:
The video begins playing immediately upon loading. If specified, the
poster image is shown before playback starts.
Looping and Muted Video
<!DOCTYPE html>
<html>
<head>
<title>Looping and Muted Video</title>
</head>
<body>
<h1>Video with Loop and Mute</h1>
<video width="640" height="360" controls loop muted>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
loop:
Replays the video automatically when it ends.
muted:
Plays the video without sound by default.
- Ideal for background videos or visual-only presentations.
Output:
The video plays in a continuous loop without sound.
Customizing Video Playback with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Custom Video Controls</title>
</head>
<body>
<h1>Custom Video Playback</h1>
<video id="customVideo" width="640" height="360">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<script>
function playVideo() {
document.getElementById('customVideo').play();
}
function pauseVideo() {
document.getElementById('customVideo').pause();
}
</script>
</body>
</html>
play() and
pause() methods manage playback.
Output:
A video with play and pause buttons controlled by JavaScript.
|
|
|
| ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
| ||||||||
|
|
|
| ||||||||
|
|
|
| ||||||||
|
|
|
| ||||||||
|
|
|
|
