Skip to content

Instantly share code, notes, and snippets.

@ajardin

ajardin/capture.html

Created February 8, 2016 08:51
Show Gist options
  • Save ajardin/ac96e9b440ae4ab6b162 to your computer and use it in GitHub Desktop.
Save ajardin/ac96e9b440ae4ab6b162 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>
@shashwat-ksolves
Copy link

not getting actual image only black image

@eggybread1
Copy link

Hi,

I have the following code on my website which works fine. Can anyone possibly show me how to add the thumbnail Javascript to this to change uploaded users video into a thumbnail? I appreciate any help at all.

Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete
'Save the original image
Dim filename As String = RemoveSpecialChars(e.FileName)
Dim imageFilename As String = DateTime.Now.Ticks.ToString() + "_" + filename
Dim acc As New accounts(Membership.GetUser.ProviderUserKey)
AjaxFileUpload1.SaveAs("E:\kunden\homepages\19\d664110395\www\myurl\catalog\videos" & imageFilename)
End Sub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment