如何使用jquery上传视频文件时从视频文件中获取缩略图 [英] How to get thumbnail image from video file when uploading it using jquery

问题描述

当我使用jquery上传时，我想从视频文件中提取缩略图。我尝试下面的代码，但它给出了一个黑色的图像。



我尝试过：



document.getElementById（fld）。addEventListener（'change'，function（e）{



url = window.URL.createObjectURL（e .target.files [0]）;

var video = document.createElement（'video'）;



video.src = url ;



var canvas = document.createElement（'canvas'）;

canvas.width = 360;

canvas.height = 240;

var context = canvas.getContext（'2d'）;



context.drawImage（video，0 ，0，canvas.width，canvas.height）;

var dataURI = canvas.toDataURL（'image / jpeg'）;

$（'＃imgpath'）。 attr（'src'，dataURI）;



}，false）;

解决方案

（'＃imgpath'）。attr（'src'，dataURI）;



}，false）;

这就是你要搜索的内容：





[视频图像tumbnail ]

更新的prev变种带有画布的视频缩略图 - JSFiddle [ ^ ]

I want to extract a thumbnail image from a video file when i upload it using jquery. I tried below code but it gives a black image.

What I have tried:

document.getElementById("fld").addEventListener('change', function (e) {

url = window.URL.createObjectURL(e.target.files[0]);
var video = document.createElement('video');

video.src = url;

var canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 240;
var context = canvas.getContext('2d');

context.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('#imgpath').attr('src',dataURI);

}, false);

解决方案

('#imgpath').attr('src',dataURI);

}, false);

This is what you searching for:


[Video to image tumbnail]

updated prev variant Video to image thumbnail with canvas - JSFiddle[^]

这篇关于如何使用jquery上传视频文件时从视频文件中获取缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！