JS实现预加载视频音频/视频获取截图(返回画布上截的图) - 行业资讯

, <强> # load-media.js

　　　　/* * 　　* 2017年Capricorncd创建　　*///同域资源实现视频截的图,可上传的图片数据格式//非同域资源实现帆布截图预览//提示码　　const代码={ 　　0:“成功”, 　　1:网址是无效的, 　　2:“onerror” 　　}/* * 　　*构造函数　　* @param选择。url音频|视频url 　　* @param选择。类型的音频|视频　　* @param选择。回调函数回调函数　　*/函数loadMedia(选择){ 　　这一点。回调=选择。回调| |函数(res) { 　　console.log (res); 　　}//初始化　　this.init(选择); 　　}//原型　　loadMedia。原型={/* * 　　*初始化媒体　　* @param url 　　*/初始化:函数(选择){ 　　让自我=; 　　如果选择。url | |选择。url !=='字符串'){ 　　这一点。回调({代码:1、味精:代码[1]}); 　　返回; 　　}//创建媒体　　让mediaType=选择。类型===耙羝怠? # 63;“音频”:“视频”; 　　这一点。媒体=document.createElement (mediaType); 　　console.log ('。媒体”,this.media);//加载　　这一点。侦听器(canplaythrough,函数(e) {//截图　　如果(mediaType==='视频'){ 　　self.screenshot (); 　　其他}{ 　　self.callback ({ 　　代码:0, 　　味精:编码[0], 　　拇指:空, 　　媒体:this.media, 　　帆布:零　　})；　　} 　　})；//错误　　这一点。侦听器(“错误”,函数(e) { 　　自我。回调({代码:2、味精:编码[2],数据:e}); 　　}）　　this.media。setAttribute (“src”, opts.url); 　　}，　　截图:函数(){//创建画布　　让帆布=document.createElement(“画布”); 　　画布。宽度=this.media.videoWidth; 　　画布。身高=this.media.videoHeight; 　　让ctx=canvas.getContext (2 d);//截取　　ctx.drawImage(这一点。媒体,0,0); 　　让拇指=零;//非跨域资源//! !非同域资源无法获取数据　　尝试{ 　　让类型=巴枷?png”; 　　让数据=canvas.toDataURL(类型); 　　拇指=oBlobData(数据类型); 　　}捕捉(e) {} 　　this.callback ({ 　　代码:0, 　　味精:编码[0], 　　拇指:拇指, 　　媒体:this.media, 　　帆布:帆布　　}）　　}，//数据转换　　toBlobData:功能(数据类型){//获取base64数据//base64数据格式://笆?图像/jpeg, base64/9 j/4 aaqskzjrgabaqeasabiaad/2 wbdaakgb + wgHBgkIBwgKCgkLDRYPDQw//9 k=" 　　data=https://www.yisu.com/zixun/window.atob (data.split (" ") [1]); 　　让ia=new Uint8Array (data.length); 　　(让我=0;我& lt;data.length;我+ +){ 　　ia[我]=data.charCodeAt(我); 　　};//画布。toDataURL返回的默认格式是/png图像　　返回新Blob ([ia]{类型:类型}); 　　}，/* * 　　* addEventListener事件监听　　* @param en EventName 　　* @param回调　　*/听众:函数(嗯,回调){ 　　this.media。addEventListener (en、功能(e) { 　　如果(回调){ 　　回调(e); 　　其他}{ 　　console.warn(这个); 　　} 　　},假); 　　}/* * 　　*资源是否跨域　　* @param url资源地址　　* @returns{布尔} 　　*///isCrossDomain:函数(url) {//让loc、主机协议;//loc=window.location;//主机=loc.host;//协议=loc.protocol;////是否为http链接//如果(/(http | https): \ \//test (url)) {//如果(url)。indexOf(协议+‘//?主机)在=0){//返回错误;//其他}{//返回true;//}//}////?xxx。mp4 ' '/xxx。mp4 ' ' xxx.mp4 '//返回错误;//} 　　} 　　　　

<强>出口默认loadMedia;

　　　　//参考资料//HTML5视频的标签的属性,方法和事件汇总//http://www.cnblogs.com/TF12138/p/4448108.html 　　#使用　　从“@/共同/js/进口loadMedia load-media” 　　让loadVideo=new loadMedia ({ 　　类型:“视频”, 　　url: http://xmqvip1 1253933147. - file.myqcloud.com/chat/video/60/2017/09/29/qgj1c8k7oayn scvideo merged.mp4”, 　　回调:handleCallback 　　}）　　函数handleCallback (res) { 　　console.log (res)//canplaythrough 　　如果(res.code===0) { 　　}//错误　　如果(res.code===2) { 　　} 　　} 　　　　

以上所述是小编给大家介绍的JS实现预加载视频音频/视频获取截图(返回画布上截的图),希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!