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截图），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！