dropzone js video上传使用frame-grap.js生成缩略图

暮雨疏桐

于 2019-02-13 15:43:23 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： dropzone video upload thumbnails video缩略图

本文链接：https://blog.youkuaiyun.com/moamao_jishuyuan/article/details/87185133

本文介绍了如何结合dropzone.js和frame-grab.js来实现视频上传时自动生成缩略图。首先从github下载frame-grab组件，然后引用相关文件，最后在Dropzone的init方法中加入特定代码实现功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：从github上下载frame-grap组件，下载的压缩里，只有下面两个文件是有用的

rsvp.js 和 frame-grab.js，目录： /frame-grab.js-master/client/ 下

下载地址为：https://github.com/rnicholus/frame-grab.js

第二步：引用文件

第三步：将以下代码加到Dropzone的 init 方法里

// for video files, use frame-grab to generate a preview.
this.on("addedfile", function(file) {

    // check file extension, see:
    // http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
    var comps = file.name.split(".");
    if (comps.length === 1 || (comps[0] === "" && comps.length === 2)) {
        return;
    }
    var ext = comps.pop().toLowerCase();
    if (ext == 'mov' || ext == 'mpeg' || ext == 'mp4' || ext == 'wmv') {

        // create a hidden <video> element with video file.
        FrameGrab.blob_to_video(file).then(
            function videoRendered(videoEl) {