Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Play video on canvas and preserve the last frame/image on HTML5 Canvas
You can play a video on an HTML5 canvas and preserve the last frame by continuously drawing the video frames onto the canvas. When the video ends, the last drawn frame remains visible on the canvas.
HTML Structure
First, create the HTML elements for the video and canvas:
<video id="myPlayer" width="640" height="480" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="myCanvas" width="640" height="480"></canvas>
JavaScript Implementation
Here's the corrected code to play video on canvas and preserve the last frame:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<video id="myPlayer" width="640" height="480" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<canvas id="myCanvas" width="640" height="480" style="border: 1px solid black;"></canvas>
<script>
var canvas = $('#myCanvas')[0];
var context = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;
$("#myPlayer").on('play', function (e) {
var video = this;
function drawFrame() {
if (!video.paused && !video.ended) {
context.drawImage(video, 0, 0, 640, 480);
requestAnimationFrame(drawFrame);
}
}
drawFrame();
});
// Optional: Draw final frame when video ends
$("#myPlayer").on('ended', function (e) {
context.drawImage(this, 0, 0, 640, 480);
console.log("Video ended - last frame preserved on canvas");
});
</script>
</body>
</html>
How It Works
The code works by:
- Canvas Setup: Creates a canvas element with the same dimensions as the video
- Play Event: Listens for the video's play event to start drawing frames
-
Frame Drawing: Uses
drawImage()to copy video frames to the canvas -
Animation Loop:
requestAnimationFrame()provides smooth frame updates - Last Frame: When the video ends, the last drawn frame remains on the canvas
Key Improvements
The improved version uses:
-
requestAnimationFrame()instead ofsetTimeout()for better performance - Proper variable references (fixed canvas variable name)
- Cleaner event handling structure
- Optional 'ended' event handler to ensure the last frame is captured
Browser Compatibility
This technique works in all modern browsers that support HTML5 video and canvas elements. The requestAnimationFrame method provides optimal performance across different devices.
Conclusion
Playing video on canvas allows you to manipulate video frames and automatically preserves the last frame when playback ends. Use requestAnimationFrame() for smooth performance and proper event handling for reliable functionality.
366 Views
