详解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 学习笔记 选择器之三
Jul 23 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
原生JavaScript实现幻灯片效果
Feb 19 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
解决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
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
详解python metaclass(元类)
2020/08/13 Python
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
AJax面试题
2014/11/25 面试题
八一演出活动方案
2014/02/03 职场文书
幼儿教师工作感言
2014/02/14 职场文书
销售顾问岗位职责
2014/02/25 职场文书
优秀广告词大全
2014/03/19 职场文书
出国留学计划书
2014/04/27 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
中秋节慰问信
2015/02/15 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
餐厅开业活动方案
2019/07/08 职场文书