|
To play a video in reverse in HTML5, you can use JavaScript to control the playback direction. This involves manipulating the video’s current time property to decrement it, creating the effect of reverse playback. This technique allows for custom control over video playback behavior directly within the browser.
PrerequisitesApproach- Create an HTML structure with <video> element and control buttons.
- Write JavaScript functions to manipulate the video’s current time for reverse playback.
- Design user interface for intuitive control of playback and reverse functionality.
- When the “Play Reverse” button is clicked, it triggers the play backward method, causing the video to play in reverse until it reaches the beginning.
Example: The example below shows How to play video in reverse in HTML5.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Play Video in Reverse</title>
<style>
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2e2e2e;
padding: 10px 20px;
color: #fff;
}
.nav-bar img {
max-width: 200px;
display: block;
margin: 0 auto;
}
#videoContainer {
text-align: center;
margin: 20px auto;
}
video {
display: block;
margin: 20px auto;
}
#playReverseButton {
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<nav class="nav-bar">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="Logo">
</nav>
<div id="videoContainer">
<video id="video" width="640" height="360" controls>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240603010134/backgroundges.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playReverseButton">Play Reverse</button>
</div>
<script>
HTMLVideoElement.prototype.playBackwards = function () {
this.pause();
let video = this;
let fps = 7;
let intervalRewind = setInterval(function () {
if (video.currentTime <= 0) {
clearInterval(intervalRewind);
video.pause();
} else {
video.currentTime -= 1 / fps;
}
}, 1000 / fps);
};
document.getElementById('playReverseButton')
.addEventListener('click', function () {
let video = document.getElementById('video');
video.playBackwards();
});
</script>
</body>
</html>
Output:
|
How to Create Alert Button in HTML?
How to Add Icons in HTML?
How to use SVG Images in CSS & HTML?
HTML Boilerplate