html上传视频截取第一帕

  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/jpegimage/webp,我一开始用的png,捣鼓了半天,质量就是不变

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

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

Video 对象属性

属性 描述
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪(加载完成)后随即播放视频。
buffered 返回表示视频已缓冲部分的 TimeRanges 对象。
controller 返回表示视频当前媒体控制器的 MediaController 对象。
controls 设置或返回视频是否应该显示控件(比如播放/暂停等)。
crossOrigin 设置或返回视频的 CORS 设置。
currentSrc 返回当前视频的 URL。
currentTime 设置或返回视频中的当前播放位置(以秒计)。
defaultMuted 设置或返回视频默认是否静音。
defaultPlaybackRate 设置或返回视频的默认播放速度。
duration 返回视频的长度(以秒计)。
ended 返回视频的播放是否已结束。
error 返回表示视频错误状态的 MediaError 对象。
height 设置或返回视频的 height 属性的值。
loop 设置或返回视频是否应在结束时再次播放。
mediaGroup 设置或返回视频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState 返回视频的当前网络状态。
paused 设置或返回视频是否暂停。
playbackRate 设置或返回视频播放的速度。
played 返回表示视频已播放部分的 TimeRanges 对象。
poster 设置或返回视频的 poster 属性的值。
preload 设置或返回视频的 preload 属性的值。
readyState 返回视频当前的就绪状态。
seekable 返回表示视频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在视频中进行查找。
src 设置或返回视频的 src 属性的值。
startDate 返回表示当前时间偏移的 Date 对象。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象。
volume 设置或返回视频的音量。
width 设置或返回视频的 width 属性的值。

Video 对象方法

方法 描述
addTextTrack() 向视频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的视频类型。
load() 重新加载视频元素。
play() 开始播放视频。
pause() 暂停当前播放的视频。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注




Enter Captcha Here :