详解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 相关文章推荐
javascript中直接写php代码的方法
Jul 31 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
js实现头像上传并且可预览提交
Dec 25 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
1.PHP简介
2006/10/09 PHP
附件名前加网站名
2008/03/23 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python中协程用法代码详解
2018/02/10 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python__name__原理及用法详解
2019/11/02 Python
python def 定义函数,调用函数方式
2020/06/02 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
统计专业自荐书
2014/07/06 职场文书
机电系毕业生求职信
2014/07/11 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书