如何将javascript中的视频文件的第一帧作为图像获取?
只需将视频标记添加到页面中,无需控件,也无需自动播放。
<video width="96" height="54" class="clip-thumbnail"> ... </video>
缺点是用户可以通过右键单击缩略图并在上下文菜单中选择“播放”来播放视频。为了避免这种情况,你需要一点点javascript来监听点击事件并取消它们(从缩略图中删除上下文菜单)。
Javascript无法做到这一点。
如前所述,Javascript无法做到这一点。
如果要为视频创建缩略图,则必须创建缩略图服务器端,然后像在任何其他图像上一样在客户端上提供图像。
我实现这一目标的选择方法是ffmpeg解码器。它可以处理多种文件格式,并且可以执行您想要的操作。因此,如果你有一个名为hello.avi
的视频,你可以这样做:
ffmpeg -itsoffset -1 -i /path/to/hello.avi -vcodec mjpeg -vframes 1 -an -f rawvideo -s 200x150 /path/to/hello.jpg
您可以使用您正在使用的任何服务器端语言运行此命令(修复路径和尺寸...),它将创建视频文件的缩略图。
如果视频是用户选择的文件到<input type="file">
,则可以使用FileReader API获取base-64视频数据:
https://developer.mozilla.org/en-US/docs/DOM/FileReader
从那里你只剩下解决视频的极其棘手的问题,并以某种方式挑选和渲染单帧,在JavaScript中。或者,您可以将整个视频包含为“缩略图预览”(我假设您这样做的原因是什么?),如下所示:
http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/
不确定最后一个例子的兼容性,或者它与较大的视频文件的兼容性(我听说你很容易碰到URL长度限制)
可以使用HTML 5视频和画布标签完成:
HTML:
<input type="file" id="file" name="file">
<video id="main-video" controls>
<source type="video/mp4">
</video>
<canvas id="video-canvas"></canvas>
使用Javascript:
var _CANVAS = document.querySelector("#video-canvas");
var _CTX = _CANVAS.getContext("2d");
var _VIDEO = document.querySelector("#main-video");
document.querySelector("#file").addEventListener('change', function() {
// Object Url as the video source
document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file").files[0]));
// Load the video and show it
_VIDEO.load();
// Load metadata of the video to get video duration and dimensions
_VIDEO.addEventListener('loadedmetadata', function() {
// Set canvas dimensions same as video dimensions
_CANVAS.width = _VIDEO.videoWidth;
_CANVAS.height = _VIDEO.videoHeight;
});
_VIDEO.addEventListener('canplay', function() {
_CANVAS.style.display = 'inline';
_CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight);
});
});