获取javascript中的视频第一帧

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

javascript无法做到这一点。

如上所述，javascript无法做到这一点

如果你想为你的视频创建缩略图，你必须在服务器端创建缩略图，然后像其他任何图像一样在客户端提供图像

我选择的实现方法是解码器。它可以处理多种文件格式，并且可以执行您想要的操作。因此，如果您有一个名为

hello.avi

的视频，您可能会：

ffmpeg -itsoffset -1 -i /path/to/hello.avi -vcodec mjpeg -vframes 1 -an -f rawvideo -s 200x150 /path/to/hello.jpg

---

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

如果视频是用户在

中选择的文件，则可以使用FileReader API获取base-64视频数据：

从这里开始，你只剩下一个极其棘手的问题：解码视频，并以某种方式挑选和渲染一个单一的javascript帧。或者，您可以将整个视频作为“缩略图预览”（我想这就是为什么要这样做的原因），如下所示：

---

但不确定最后一个示例的兼容性，也不确定它与更大的视频文件的兼容程度（我听说你可以很容易地遇到URL长度限制）

只需将视频标记添加到页面中，而无需控制和自动播放

... 

---

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

可以使用HTML 5视频和画布标记来完成：

HTML:

---

您是指客户端js还是服务器端js？如果客户端我认为这是不可能的。哪种视频格式？flv？阿维？mov？您使用的是HTML5视频标签吗？格式可以是above@Josh：除非有！表中有很多行，可以在客户端使用HTML5标记来完成，请参见下面的我的答案。我不得不添加'video.currentTime=0.001'作为解决方法，否则图像是空白的。

<input type="file" id="file" name="file">

<video id="main-video" controls>
   <source type="video/mp4">
</video>

<canvas id="video-canvas"></canvas>

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);
    });

});