网页视频抓取脚本( 2017年10月09日#load-media.jsexportdefaultloadMedia)

　　网页视频抓取脚本(

2017年10月09日#load-media.jsexportdefaultloadMedia)

　　JS实现预加载视频音视频获取截图（返回画布截图）

　　更新时间：2017-10-09 15:29:55 作者：capricorncd

　　本篇文章主要介绍JS实现预加载视频音频/视频获取截图（返回canvas截图）的相关信息。有需要的朋友可以参考以下

　　#load-media.js

　　

/**

* Create by Capricorncd 2017

*/

// 同域资源实现视频截图，可上传的图片数据格式

// 非同域资源实现canvas截图预览

// 提示码

const CODES = {

0: 'success',

1: 'The url is not valid',

2: 'onerror'

}

/**

* constructor

* @param opts.url 音频|视频URL

* @param opts.type 'audio|video'

* @param opts.callback 回调函数

*/

function loadMedia(opts) {

this.callback = opts.callback || function (res) {

console.log(res);

}

// 初始化

this.init(opts);

}

// prototype

loadMedia.prototype = {

/**

* 初始化media

* @param url

*/

init: function (opts) {

let self = this;

if (!opts.url || typeof opts.url !== 'string') {

this.callback({code: 1, msg: CODES[1]});

return;

}

// 创建media

let mediaType = 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 () {

// create canvas

let canvas = document.createElement('canvas');

canvas.width = this.media.videoWidth;

canvas.height = this.media.videoHeight;

let ctx = canvas.getContext('2d');

// 截取

ctx.drawImage(this.media, 0, 0);

let thumb = null;

// 非跨域资源

// !!非同域资源无法获取数据

try {

let type = 'image/png';

let data = 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+w*敏*感*词*gkIBwgKCgkLDRYPDQw//9k="

data = window.atob(data.split(',')[1]);

let ia = new Uint8Array(data.length);

for (let i = 0; i < data.length; i++) {

ia[i] = data.charCodeAt(i);

};

// canvas.toDataURL 返回的默认格式是 image/png

return new Blob([ia], {type: type});

},

/**

* addEventListener 事件*敏*感*词*

* @param en EventName

* @param callback

*/

listener: function (en, callback) {

this.media.addEventListener(en, function (e) {

if (callback) {

callback(e);

} else {

console.warn(this);

}

}, false);

}

/**

* 资源是否跨域

* @param url 资源地址

* @returns {boolean}

*/

// isCrossDomain: function (url) {

// let loc, host, protocol;

// loc = window.location;

// host = loc.host;

// protocol = loc.protocol;

// // 是否为http链接

// if (/(http|https):\/\//.test(url)) {

// if (url.indexOf(protocol + '//' + host) >= 0) {

// return false;

// } else {

// return true;

// }

// }

// // './xxx.mp4' '/xxx.mp4' 'xxx.mp4'

// return false;

// }

}

　　导出默认加载媒体；

　　

// 参考资料

// HTML5的Video标签的属性,方法和事件汇总

// http://www.cnblogs.com/TF12138/p/4448108.html

# 使用

import loadMedia from '@/common/js/load-media'

let loadVideo = new loadMedia({

type: 'video',

url: 'http://xmqvip1-1253933147.file.myqcloud.com/chat/video/60/2017/09/29/qgj1c8K7oaYn-SCVideo-Merged.mp4',

callback: handleCallback

})

function handleCallback (res) {

console.log(res)

// canplaythrough

if (res.code === 0) {

}

// error

if (res.code === 2) {

}

}

　　总结

　　以上就是小编介绍的预加载视频音频/视频获取截图（返回画布截图）的JS实现。我希望它对你有帮助。如有任何问题，请给我留言，小编会及时回复您。. 还要感谢大家对脚本之家网站的支持！