By Mico — Jul 1, 2024

html5 video - currentTime

Q: I want to make user access my web video. and pause in some time. and click get screenshot. how to do that?

Yes, that's correct! The video.currentTime property is a part of the HTML5 video API, and it provides the current playback position of the video in seconds. It is indeed possible to use this property to get the current time of the video when the user pauses it and clicks the screenshot button.

Here's the complete and functional setup with a slight refinement to ensure clarity:

HTML and JavaScript (index.html)

This HTML file includes the video player, a button to take a screenshot, and an image element to display the screenshot. The JavaScript captures the current time of the video and sends a request to the server to take a screenshot.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player with Screenshot</title>
</head>
<body>
    <video id="videoPlayer" width="640" height="360" controls>
        <source src="output_video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <br>
    <button id="screenshotBtn">Get Screenshot</button>
    <br>
    <img id="screenshot" src="" alt="Screenshot will appear here" width="640" height="360">
    <script>
        document.getElementById('screenshotBtn').addEventListener('click', async () => {
            const video = document.getElementById('videoPlayer');
            const time = video.currentTime;

            const response = await fetch(`/screenshot?time=${time}`);
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);

            document.getElementById('screenshot').src = url;
        });
    </script>
</body>
</html>

Node.js Server Script (server.js)

This server script uses Express to handle requests and Fluent-FFmpeg to take screenshots at specified times.

Create a Server ScriptCreate a file named server.js with the following content:

const express = require('express');
const path = require('path');
const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('ffmpeg-static');
const fs = require('fs');

const app = express();
const PORT = 3000;

app.use(express.static(path.join(__dirname)));

app.get('/screenshot', (req, res) => {
    const time = req.query.time;
    const videoPath = path.join(__dirname, 'output_video.mp4');
    const screenshotPath = path.join(__dirname, 'screenshot.png');

    ffmpeg(videoPath)
        .setFfmpegPath(ffmpegPath)
        .screenshots({
            timestamps: [time],
            filename: 'screenshot.png',
            folder: __dirname
        })
        .on('end', () => {
            res.sendFile(screenshotPath, () => {
                fs.unlinkSync(screenshotPath); // Delete the screenshot after sending
            });
        })
        .on('error', (err) => {
            console.error(err);
            res.status(500).send('Error taking screenshot');
        });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Initialize the Node.js Project

mkdir video-screenshot
cd video-screenshot
npm init -y
npm install express ffmpeg-static fluent-ffmpeg

Step 3: Run the Server

Save the output_video.mp4 file in the same directory as your index.html and server.js.
Open your browser and navigate to http://localhost:3000.

Start the server:

node server.js

By following these steps, you will have a functional web application where users can play a video, pause it, click a button to take a screenshot, and see the screenshot displayed on the page. The video.currentTime property is indeed used to get the exact time position in the video, ensuring the screenshot is taken at the correct moment.