Welcome to your journey into the world of HTML Video! This lesson is designed to help you understand the ins and outs of embedding videos in your web pages, making your content more engaging and interactive. š
HTML provides us with the <video> tag to embed videos. The <video> tag supports multiple video formats like MP4, WebM, and Ogg.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>š Note: Always provide multiple video formats to ensure compatibility across different browsers.
<video> Attributes šÆwidth and heightThese attributes specify the video's width and height in pixels.
controlsAdding controls attribute will display a set of default controls like play, pause, volume, and seek bar.
srcThe src attribute specifies the location of the video file.
autoplayThe autoplay attribute allows the video to start playing automatically when the page loads.
preloadThe preload attribute controls when the video should start loading. Options are none (don't preload), metadata (load the video's metadata), auto (load the entire video), and progressive (load as much as possible without buffering).
You can customize the video's appearance and behavior using various attributes. Here are a few examples:
The poster attribute specifies an image to be displayed before the video is played.
<video width="320" height="240" poster="movie.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>The volume attribute sets the initial volume of the video, and the muted attribute mutes the video by default.
<video width="320" height="240" controls volume="0.5" muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>You can create custom controls using JavaScript. Let's create a simple video player with play, pause, and time display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Video Player</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="time-display"></div>
<script>
const video = document.getElementById('myVideo');
const timeDisplay = document.getElementById('time-display');
video.ontimeupdate = () => {
const currentTime = video.currentTime;
const totalTime = video.duration;
timeDisplay.textContent = `${currentTime.toFixed(2)} / ${totalTime.toFixed(2)}`;
};
document.getElementById('play').addEventListener('click', () => {
video.play();
});
document.getElementById('pause').addEventListener('click', () => {
video.pause();
});
</script>
</body>
</html>Which attribute is used to specify an image to be displayed before the video is played?
Happy coding! š