Skip to content

Instantly share code, notes, and snippets.

@monkeymonk

monkeymonk/capture.html

Forked from ajardin/capture.html
Created November 13, 2019 11:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monkeymonk/d1f28f566afca14952f64a83b82dea4a to your computer and use it in GitHub Desktop.
Save monkeymonk/d1f28f566afca14952f64a83b82dea4a to your computer and use it in GitHub Desktop.
Download ZIP
Capture a thumbnail from a video with JavaScript.
Raw
capture.html
<!DOCTYPE html>
<head>
<script type='text/javascript'>
window.onload = function () {
var video = document.getElementById('videoId');
var canvas = document.getElementById('canvasId');
var img = document.getElementById('imgId');
video.addEventListener('play', function () {
canvas.style.display = 'none';
img.style.display = 'none';
}, false);
video.addEventListener('pause', function () {
canvas.style.display = 'block';
img.style.display = 'block';
draw(video, canvas, img);
}, false);
};
function draw(video, canvas, img) {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
img.setAttribute('src', dataURL);
}
</script>
</head>
<body>
<video id="videoId" autoplay loop controls>
<source src="test.webm" type="video/webm">
<source src="test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="canvasId"></canvas>
<img id="imgId" src=""/>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment