How to Play Video in Reverse in HTML5 ?

Last Updated : 04 Jun, 2024

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.

Prerequisites

Approach

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 add Label above Video in HTML5 ?

ashishrettgg

Improve

Article Tags :

How to Play Video in Reverse in HTML5 ?

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?