html5 JS前端获取视频封面，无需后端配合

思路，加载一个，video 播放器，然后通过 canvas 画布drawImage 方法将video元素 生成图像

如果需要上传图片到后面保存也是可以的，如下是一个我在工作中实际写的代码，仅作为参考：

    //获取视频封面
    function getVideoImage(blobUrl, call) {
        var video = $("#video-screenshot");
        if (video.length<1) {
            video = $('<video style="height: 0; width: 0;" id="video-screenshot">').appendTo("body");
            video[0].addEventListener('loadeddata', function(e) {
                // console.log(e);
                this.width = this.videoWidth;
                this.height = this.videoHeight;
                this.currentTime = this.duration > 10 ? 10 : this.duration/2;
                // this.play();
                // this.pause();
                var _this = this;
                setTimeout(function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = _this.width;
                    canvas.height = _this.height;
                    ctx.drawImage(_this, 0, 0, canvas.width, canvas.height);
                    var image = {
                        width: _this.width,
                        height: _this.height,
                        currentTime: _this.currentTime,
                        duration: _this.duration
                    };
                    canvas.toBlob(function(blob) {
                        image.blob = blob;
                        image.url = URL.createObjectURL(blob);
                        typeof call == 'function' ? call.call(this, image) : '';
                    });
                }, 300);
            });
        }
        video[0].pause();
        video[0].src = blobUrl;
    }



    //选择封面图
    $("#choose-image").click(function (e) {
        var $this = $(this), image = $("#preview-image")[0], blob = image.blob, filename = image.filename;
        var filenamearr = filename.split('.');
        filenamearr.splice(-1);
        var url = '/upload';
        var formData = new FormData();
        formData.append('filedata', blob, filenamearr.join(',')+'.jpg');
        formData.append("moredata", '其他字段可添加');
        //上传图片
        $this.prop('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (res) {
                $this.prop('disabled', false);
                //成功
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $this.prop('disabled', false);
                console.error('上传封面图出错', textStatus, errorThrown);
            }
        });
    });


    $("#files").change(function (event) {
        if (!event.target.files[0]) return;
        if (event.target.files[0].type.indexOf('video/') != 0) return simpleDialog({msg: '请选择视频文件'});

        //自动获取封面图
        var blobUrl = URL.createObjectURL(event.target.files[0]);
        getVideoImage(blobUrl, function(image) {
            $("#preview-image").attr('src', image.url);
            $("#preview-image")[0].blob = image.blob;
            $("#preview-image")[0].filename = event.target.files[0].name;
            $("#preview-video").show();
        });

    });

HTML:

    <div class="form-group">
        <label class="required">视频文件 <span class="required">*</span></label>
        <input type="file" id="files" class="form-control"/>
        <div class="pre-video" id="preview-video" style="display: none;margin-top: 10px;">
            <image id="preview-image" style="width: 240px; height: 135px; display: inline-block;" />
            <button class="btn btn-default" id="choose-image" type="button" style="vertical-align: top;">选择此封面</button>
        </div>
        <p class="help-block">请上传1920*1080视频</p>
    </div>    

版权属于：Joyber

本文链接：https://blog.qqvbc.com/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/293.html

转载时须注明出处及本声明