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

首先就是要把视频加载出来,然后使用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”

<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任意时间的画面截图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • js中时间格式化的几种方法

    项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式: 例如: yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端处理,也可以后台可以好之后再传递到页面) 方法一:实体类中添加时间转换注解(注意时区问题) /** * 开始时间 */ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone="GMT+8") private Date startTime; 方法二:

  • JS将时间秒转换成天小时分钟秒的字符串

    项目中需求是这样,接口返回的数据中时间单位为秒,但前端显示的时候需要更人性化的带有单位(天,小时,分钟,秒)的字符串: 转换函数如下: /** * 格式化秒 * @param int value 总秒数 * @return string result 格式化后的字符串 */ function formatSeconds(value) { var theTime = parseInt(value);// 需要转换的时间秒 var theTime1 = 0;// 分 var theTime2 = 0

  • 超轻量级的js时间库miment使用解析

    介绍 Miment 是一个轻量级的时间库(打包压缩后只有1K),没有太多的方法, Miment的设计理念就是让你以几乎为零的成本快速上手,无需一遍一遍的撸文档 由来 首先 致敬一下Moment,非常好用的一个时间库,我本身也是Moment重度使用者,用习惯了Moment,一碰到需要处理时间的需求,立马Moment,不过有时候想想,Moment给我们提供了那么多的功能,但是我们天天用的,也就那么一两个,刚好最近在写微信小程序,然后在页面引入Moment,打包完,包竟然大了200多K,把Moment

  • 使用iojs的jsdom库实现同步系统时间

    使用iojs的jsdom库与 http://open.baidu.com/special/time/ 同步系统时间. var jsdom = require("jsdom"); var exec = require('child_process').exec; jsdom.env({ url: "http://open.baidu.com/special/time/", scripts: ["D:\\jquery-1.9.1.min.js"],

  • Extjs显示从数据库取出时间转换JSON后的出现问题

    后台从数据库取出时间,JSON格式化后再传到gridpanel,这时时间变成了:/Date(32331121223)/这样的格式,那么这时需要以下处理才可以正常显示: 在 复制代码 代码如下: var record = Ext.data.Record.create([ { name: 'PublicDate', mapping: 'PublicDate', dateFormat: 'Y-m-d', convert: function (v) { if (v == null) { return n

  • js实现倒计时器自定义时间和暂停

    js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;

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

    首先就是要把视频加载出来,然后使用canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图,需要不同时间的video视频图,设置video的currentTime(单位秒),然后videoElement这个对象信息会实时更新. 如果是视频是在阿里云OSS上就更方便了,poster="http://a-image-demo.oss-cn-qingdao.aliyun

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

  • 详解JS深拷贝与浅拷贝

    一.预备知识 1.1.JS数据类型 基本数据类型:Boolean.String.Number.null.undefined 引用数据类型:Object.Array.Function.RegExp.Date等 1.2.数据类型的复制 基本数据类型的复制,是按值传递的 var a = 1; var b = a; b = 2; console.log(a); // 1 console.lob(b); // 2 引用数据类型的复制,是按引用传值 var obj1 = { a: 1; b: 2; }; v

  • 详解JS浏览器储存

    引言 随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie.LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢. Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份.众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁.比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢.而使

  • 详解JS WebSocket断开原因和心跳机制

    1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e) } 错误状态码: WebSocket断开时,会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在 We

  • 详解JS浏览器事件模型

    什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

  • 详解JS中你不知道的各种循环测速

    前言 在测试循环速度之前,我们先来创建一个有 100 万数据的数组: const len = 100 * 10000; const arr = []; for (let i = 0; i < len; i++) { arr.push(Math.floor(Math.random() * len)); } 测试环境为: 1.电脑:iMac(10.13.6): 2.处理器:4.2 GHz Intel Core i7: 3.浏览器:Chrome(89.0.4389.82) 1. for 循环 for

  • 详解JS内存空间

    概述 变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要.可是后我当我回过头来重新整理JS基础时,发现由于对它们的模糊认知,导致了很多东西我都理解得并不明白.比如最基本的引用数据类型和引用传递到底是怎么回事儿?比如浅复制与深复制有什么不同?还有闭包,原型等等. 因此后来我才渐渐明白,想要对JS的理解更加深刻,就必须对内存空间有一个清晰的认知. 一.栈

随机推荐