JS实现预加载视频音频/视频获取截图(返回canvas截图)
#load-media.js
/** *CreatebyCapricorncd2017 */ //同域资源实现视频截图,可上传的图片数据格式 //非同域资源实现canvas截图预览 //提示码 constCODES={ 0:'success', 1:'Theurlisnotvalid', 2:'onerror' } /** *constructor *@paramopts.url音频|视频URL *@paramopts.type'audio|video' *@paramopts.callback回调函数 */ functionloadMedia(opts){ this.callback=opts.callback||function(res){ console.log(res); } //初始化 this.init(opts); } //prototype loadMedia.prototype={ /** *初始化media *@paramurl */ init:function(opts){ letself=this; if(!opts.url||typeofopts.url!=='string'){ this.callback({code:1,msg:CODES[1]}); return; } //创建media letmediaType=opts.type==='audio'?'audio':'video'; this.media=document.createElement(mediaType); console.log('this.media',this.media); //loaded this.listener('canplaythrough',function(e){ //截图 if(mediaType==='video'){ self.screenshot(); }else{ self.callback({ code:0, msg:CODES[0], thumb:null, media:this.media, canvas:null }); } }); //error this.listener('error',function(e){ self.callback({code:2,msg:CODES[2],data:e}); }) this.media.setAttribute('src',opts.url); }, screenshot:function(){ //createcanvas letcanvas=document.createElement('canvas'); canvas.width=this.media.videoWidth; canvas.height=this.media.videoHeight; letctx=canvas.getContext('2d'); //截取 ctx.drawImage(this.media,0,0); letthumb=null; //非跨域资源 //!!非同域资源无法获取数据 try{ lettype='image/png'; letdata=canvas.toDataURL(type); thumb=this.toBlobData(data,type); }catch(e){} this.callback({ code:0, msg:CODES[0], thumb:thumb, media:this.media, canvas:canvas }) }, //数据转换 toBlobData:function(data,type){ //获取base64数据 //base64数据格式: //"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAkGB+wgHBgkIBwgKCgkLDRYPDQw//9k=" data=window.atob(data.split(',')[1]); letia=newUint8Array(data.length); for(leti=0;i=0){ //returnfalse; //}else{ //returntrue; //} //} ////'./xxx.mp4''/xxx.mp4''xxx.mp4' //returnfalse; //} }
exportdefaultloadMedia;
//参考资料 //HTML5的Video标签的属性,方法和事件汇总 //http://www.cnblogs.com/TF12138/p/4448108.html #使用 importloadMediafrom'@/common/js/load-media' letloadVideo=newloadMedia({ type:'video', url:'http://xmqvip1-1253933147.file.myqcloud.com/chat/video/60/2017/09/29/qgj1c8K7oaYn-SCVideo-Merged.mp4', callback:handleCallback }) functionhandleCallback(res){ console.log(res) //canplaythrough if(res.code===0){ } //error if(res.code===2){ } }
总结
以上所述是小编给大家介绍的JS实现预加载视频音频/视频获取截图(返回canvas截图),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!