在javascript中获取视频第一帧答案

【问题标题】：Get video first frame in javascript在javascript中获取视频第一帧
【发布时间】：2010-11-12 15:01:19
【问题描述】：

如何在 javascript 中获取视频文件的第一帧作为图像？

【问题讨论】：

你是说客户端js还是服务端js？如果客户端我认为这是不可能的。
哪种视频格式？ flv? AVI？移动？
你在使用 HTML5 视频标签吗？
格式可以是上述任何一种
@Josh：除非是这样！ en.wikipedia.org/wiki/Server-side_JavaScript 的表中有很多行

【解决方案1】：

可以使用 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);
    });

});

View demo

【讨论】：

对我不起作用。我必须添加“video.currentTime = 0.001”作为解决方法，否则图像为空白。
这个下划线大写的命名约定看起来很特别。

【解决方案2】：

只需将视频标签添加到页面，没有控件，也没有自动播放。

<video width="96" height="54" class="clip-thumbnail"> ... </video>

缺点是用户可以通过右键单击缩略图并在上下文菜单中选择“播放”来播放视频。为避免这种情况，您需要一些 javascript 来监听点击事件并取消它们（从缩略图中删除上下文菜单）。

【讨论】：

【解决方案3】：

Javascript 无法做到这一点。

【讨论】：

它可以在客户端使用 HTML 5 标签完成，请参阅下面的答案

【解决方案4】：

如前所述，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

您可以使用您使用的任何服务器端语言运行此命令（修复路径和尺寸...），它会创建视频文件的缩略图。

【讨论】：

【解决方案5】：

如果视频是用户选择到<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 长度限制）

【讨论】：