Welcome back to CodeYourCraft! Today, we're diving into the exciting world of HTML Video DOM Methods. Let's get started! š
Before we dive into the methods, let's familiarize ourselves with the HTML <video> element. This tag allows us to embed video content in our web pages.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>š” Pro Tip: The <source> tag allows us to provide multiple video sources with different formats. This ensures that the video is playable across various browsers.
Now that we have our video embedded, let's learn how to interact with it using JavaScript (DOM) methods. Here are some essential methods:
video.play() š¬This method starts playing the video.
// Get the video element
let video = document.getElementById('myVideo');
// Play the video
video.play();video.pause() šThis method pauses the currently playing video.
// Pause the video
video.pause();video.currentTime ā±This property represents the current playback position of the video.
// Get the current playback position (in seconds)
let currentTime = video.currentTime;video.duration šThis property represents the total duration of the video.
// Get the total duration of the video (in seconds)
let duration = video.duration;video.volume šThis property represents the volume level of the video.
// Change the volume level (between 0 and 1)
video.volume = 0.5;video.muted š¤«This property determines whether the audio for the video is muted or not.
// Mute the video
video.muted = true;Which method stops the currently playing video?
Let's create a simple HTML page with a video player that allows us to play, pause, seek, and change the volume.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video DOM Methods</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="controls">
<button onclick="playPause()">Play/Pause</button>
<button onclick="seek(10)">Seek to 10 seconds</button>
<button onclick="changeVolume(0.2)">Lower Volume</button>
</div>
<script>
function playPause() {
let video = document.getElementById('myVideo');
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function seek(seconds) {
let video = document.getElementById('myVideo');
video.currentTime = seconds;
}
function changeVolume(level) {
let video = document.getElementById('myVideo');
video.volume = level;
}
</script>
</body>
</html>š” Pro Tip: In the example above, we have created a simple control panel for our video player. The playPause() function toggles between playing and pausing the video, the seek(seconds) function allows us to seek to a specific point in the video, and the changeVolume(level) function adjusts the volume level.
That's it for today's lesson! We hope you enjoyed learning about HTML Video DOM Methods. Stay tuned for more exciting tutorials at CodeYourCraft! šš