如果我的 javascript 文档中有一个视频文件,如何从中间抓取一帧?这会抓取当前帧,但我想要中间的帧作为缩略图。这是很容易就能做到的事情吗?这种方法可行,但抓取完成后我无法将帧设置回开头。
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = canvas.width;
var ch = canvas.height;
draw(v,context,cw,ch);
v.currentTime = 5;
function draw(v,c,w,h) {
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
最佳答案
我对之前的回答表示歉意,
video.seekTo({ frame: frameNum });
帮我解决了这个问题。根据需要自定义frameNum。
HTML:
<div class="frame">
<span id="currentFrame">0</span>
</div>
<video height="180" width="100%" id="video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
<div id="controls">
<button id="play-pause">Play</button>
</div>
JS:
var currentFrame = $('#currentFrame');
var frameNum =100;
var video = VideoFrame({
id : 'video',
frameRate: 29.97,
callback : function(frame) {
currentFrame.html(frame);
}
});
video.seekTo({ frame: frameNum });
$('#play-pause').click(function(){
if(video.video.paused){
video.video.play();
video.listen('frame');
$(this).html('Pause');
}else{
video.video.pause();
video.stopListen();
$(this).html('Play');
}
});
有关视频帧的引用,请访问:https://github.com/allensarkisyan/VideoFrame
关于javascript - 从视频中抓取第 n 帧进行预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37012621/