JS实现预加载视频音频/视频获取截图(返回canvas截图)


Posted in Javascript onOctober 09, 2017

 #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+wgHBgkIBwgKCgkLDRYPDQw//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;
 // }
}

export default loadMedia;

// 参考资料
// 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实现预加载视频音频/视频获取截图(返回canvas截图),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JS轮播图的实现方法
Aug 24 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 #Javascript
JS中Attr的用法详解
Oct 09 #Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
浅谈node的事件机制
Oct 09 #Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 #Javascript
ES6中的Promise代码详解
Oct 09 #Javascript
You might like
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
python opencv实现简易画图板
2020/08/27 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
奥林匹克运动会口号
2014/06/19 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
建党伟业观后感
2015/06/01 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis