详解js获取video任意时间的画面截图


Posted in Javascript onApril 17, 2019

首先就是要把视频加载出来,然后使用canvas.getContext(‘2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图,需要不同时间的video视频图,设置video的currentTime(单位秒),然后videoElement这个对象信息会实时更新。

如果是视频是在阿里云OSS上就更方便了,poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”

 详解js获取video任意时间的画面截图

<div contenteditable="true" id="in-box" style="width:1000px;margin: 20px auto;"></div>
<div style="width:1000px;margin: 20px auto;">  
 <input type="file" name="" id="upload-ipt">
 <div class="review" id="out-box"></div>
</div>
function getVideoImage() {
 var obj_file = document.getElementById("upload-ipt");
 var file = obj_file.files[0];
 var blob = new Blob([file]), // 文件转化成二进制文件
  url = URL.createObjectURL(blob); //转化成url
 if (file && /video/g.test(file.type)) {
  var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
  //后面加一个空格div是为了解决在富文本中按Backspace时删除无反应的问题
  $('#in-box').html($video);
  var videoElement = $("video")[0];
  videoElement.addEventListener("canplay", function (_event) {
   var canvas = document.createElement("canvas");     
   canvas.width = videoElement.videoWidth;
   canvas.height = videoElement.videoHeight;
   console.log(videoElement.videoWidth)
   canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
   var img = document.createElement("img");
   img.src = canvas.toDataURL("image/png");
   $("#out-box").html(img);
   URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
   console.log("loadedmetadata")
  });
 }else{
  alert("请上传一个视频文件!");
  obj_file.value = ""
 }
};

以上所述是小编给大家介绍的js获取video任意时间的画面截图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
JavaScript函数详解
Feb 27 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
js创建数组的简单方法
Jul 27 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
解决vue跨域axios异步通信问题
Apr 17 #Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 #Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 #Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
You might like
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PDO::rollBack讲解
2019/01/29 PHP
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
js实现图片360度旋转
2017/01/22 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
在Python中增加和插入元素的示例
2018/11/01 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python清空命令行方式
2020/01/13 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
Servlet的生命周期
2013/08/25 面试题
银行实习鉴定
2013/12/13 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
酒店营销策划方案
2014/02/07 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
小学老师对学生的评语
2014/12/29 职场文书
第一书记观后感
2015/06/08 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
TV动画《间谍过家家》公开PV
2022/03/20 日漫