1. 监听文件变化
2. 读取文件数据
3. FileReader.readAsDataURL将上传的文件转为Base64格式
4. 将video绘制到canvas上，截取第一帕，canvas.toDataURL生成图片

 <input type="file" class="uploader-video" accept="video/*"  multiple>

  $(document).on('change','.uploader-video',function () {

            let file = this.files;  //读取文件

            console.log(file);

           

            let reader = new FileReader();
            reader.readAsDataURL(file[0]);
            reader.addEventListener('loadend',  ()=> {


                let src = reader.result;

                let video = document.createElement('video');
                video.src = src
               // 视频加载
               video.onloadeddata = ()=> {



                   let canvas = document.createElement('canvas');
                   let ctx = canvas.getContext("2d")
                   ctx.fillStyle = '#ffffff';
                   //定义宽高，1920*1080的比例  = 1.77777777777778
                   let width = 640,
                       height = 360;
                   canvas.width = width;
                   canvas.height = height ;
                   ctx.drawImage(video, 0, 0, width, height);//将video视频绘制到canvas中
                   let img = canvas.toDataURL('image/webp',0.5);//0.5压缩比例，可以选0-1质量区间
                   console.log(img);
               }



            })

          

        })

遇到的问题

• 要创建document.createElement('video')，要传入video对象，直接传入视频地址，canvas会报错的
• 判断视频是否加载完成用，onloadeddata
• toDataURL参数为PNG时不支持传图片质量，只能image/jpeg或image/webp，我一开始用的png，捣鼓了半天，质量就是不变

上传图片压缩，大同小异，类似，换汤不药，new Imgae()

上传图片压缩参考：https://www.blyoo.com/5071.html

Video 对象属性

Video 对象方法