js截屏 video_js获取video任意时间的画面截图
js获取video任意时间的画面截图
更新时间:2019-04-16 09:12:00点击次数:1757次
首先就是要把视频加载出来,然后使用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”
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是为了解决在富文本中按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_js获取video任意时间的画面截图相关推荐
- js截屏 video_js获取视频截图
参考: https://segmentfault.com/q/1010000006717959 问题: a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片 b.得先加载视频到video,做 ...
- js截屏以及three.js场景截屏
做这个功能都是半个月之前的事情了,没想到一直耽误却一直都没有写下总结,尴尬.....来来来,说正事 在手机端截屏完全不需要前端动什么脑子,但是在网页上截屏就很头疼了,我这里介绍两种情形,针对普遍和某一 ...
- iOS开发-检测用户截屏 并获取所截图片
微信可以检测到用户截屏行为(Home + Power),并在稍后点击附加功能按钮时询问用户是否要发送刚才截屏的图片,这个用户体验非常好.于是乎, 我也想着实现这个功能. 在iOS7之前, 如果用户截屏 ...
- js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- js截屏代码_服务端浏览器截屏
服务端浏览器截屏是结合 selenium + html2canvas 实现的通过在 Chrome 环境下生成图片. selenium是最广泛使用的开源Web UI自动化测试套件之一.本文中使用sele ...
- js截屏代码_JavaScript网页截屏方法,你get到了嘛?
之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容 ...
- iOS学习—截屏/屏幕获取的监测
现有的APP中有许多涉及到隐私信息的页面,在被截图后会出现"保护个人隐私"等字样的提示,我们也可做其他操作,现在我们来进行阐述. 一.截屏活动的获取 iOS中通过此方法对截图活动进 ...
- iOS_截屏_获取截屏图片
iOS 截屏,并获取截屏图片 // 1.添加系统通知 [[NSNotificationCenter defaultCenter] addObserver:selfselector:@selector( ...
- js截屏工具(html2anvas)
首先不会像其它文章一样把文档搬过来解释一边.而是在实际项目中实际使用来写. 目录 前言 一.用前须知 二.项目实际使用 1.项目描述 2.使用步骤 3.图片跨域问题 4.css样式问题 最后 前言 网 ...
最新文章
- python3 队列 queue
- java中对象的生存期_JSP中JavaBean的生命周期
- 用eclips连hadoop报Unknown protocol to job tracker: org.apache.hadoop.hdfs.protocol.ClientProtoco
- 【渝粤题库】广东开放大学 市场营销 形成性考核
- mysql 中有没有临时表_MySQL临时表的简单用法
- 已知信码序列为1011_信息论与编码理论习题答案解析.doc
- 谷歌在线办公法器-Google Docs
- vue---数据列表循环
- mysql有varchar2吗_char、varchar、varchar2区别
- 垃圾邮件过滤python_手把手教你用Python 和 Scikit-learn 实现垃圾邮件过滤
- Flutter 与 Compose 应该怎么选择?它们冲突吗?
- 有关Windows10中诊断和反馈隐私设置
- 程序员必知的8个Java开源IDE工具!你最钟意哪个?
- Android程序员在大厂工作是什么体验?
- 野路子玩Qt,第三十一集,擦玻璃游戏
- 怎么在PDF上修改文字,PDF修改文字的步骤
- 《博弈心理学》-占据主动的策略思维
- 全球电视出货量或下跌一成,对中国液晶面板企业的打击或较小
- Myth源码解析系列之二-项目结构介绍
- python 实现文章中词汇的频率统计并进行显示(针对英文文章)
热门文章
- java检测安卓程序退出_java-我的Android应用程序的gameLoop线程在退出...
- qgraphicsitem 复制副本_如何在pyqt5中复制粘贴Qgraphicsitem?
- 【小项目关键技术】硬件通信三种方式、串口、IIC、SPI
- 【控制】《自动控制原理》胡寿松老师-目录
- STM32F103/302 SPI3 接口使用例程
- 3.9 降低DFT泄露的一种办法---加窗
- 【随笔】express中间件系统的基本实现
- 修改CMD设置使其支持鼠标选择复制
- JS实现动态生成表格并提交表格数据向后端 表格中数据转为json
- Django环境的搭建以及最简示例