参考：
https://segmentfault.com/q/1010000006717959
问题：
a.获取的好像是第一帧的图？第一帧为透明图时，获取的个透明图片
b.得先加载视频到video,做视频上传的时候体验不太友好
c.qq空间能截取视频图片，不知道怎么实现的

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

<video id="video" controls="controls" width="400" height="300">

    <source src="myvideo.mp4">

</video>

<br><br>

视频第一帧图片：

<div id="output"></div>

<script type="text/javascript">

(function(){

var video, output;

var scale = 0.8;

var initialize = function() {

    output = document.getElementById("output");

    video = document.getElementById("video");

    video.addEventListener('loadeddata',captureImage);

};

var captureImage = function() {

    var canvas = document.createElement("canvas");

    canvas.width = video.videoWidth * scale;

    canvas.height = video.videoHeight * scale;

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");

    img.src = canvas.toDataURL("image/png");

    img.width = 400;

    img.height = 300;

    output.appendChild(img);

};

initialize();

})();

</script>

</body>

</html>

　　

js获取视频截图的更多相关文章

  1. ios 获取视频截图

    #pragma mark -- 获取视频截图- (UIImage *)getThumbnailImage:(NSString *)videoURL{     AVURLAsset *asset = [ ...

  2. js实现视频截图,视频批量截图,canvas实现

    截取视频的某一时间的图像并保存 利用canvas的绘画能力画出视频某一帧的视频画面, 获得到图像之后转换成base64图像, 再利用a标签的实现自动保存到本地 html代码 <!DOCTYPE ...

  3. ffmpeg快速获取视频截图

    使用ffmpeg可以非常方便的生成视频截图,命令行下的mplayer也可以做视频截图,只不过mplayer在本质上还是调用ffmpeg来实现.ffmpeg 通过指定 -vcodec 参数为 mjpeg ...

  4. ios 从相册视频中获取视频截图

    //给image添加个分类 +(UIImage *)getImage:(NSURL: *)videoURL { AVURLAsset *asset = [[AVURLAsset alloc] init ...

  5. Android必知必会-获取视频文件的截图、缩略图

    背景 公司最近要求给我负责的APP加上视频录制和发布的功能,我简单的完成了基本的录制和视频压缩功能,后来发现发布接口需要上传视频的截图,网上搜索了一下资料,在这里整理一下. 代码实现 /** * 获取 ...

  6. vue / js使用video获取视频时长

    项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没 ...

  7. .net core Docker 容器添加ffmpeg 获取视频信息和截图

    最近在处理上传视频,需要获取视频信息和截图,这里就需要用到ffmpeg; 由于我的项目是在docker compose中运行调试,所以ffmpeg也需要在docker中能调用: 网上找到的方法在Doc ...

  8. js 获取上传视频的时长、大小、后缀名

    参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...

  9. 【转载】用原生JS和html5进行视频截图并保存到本地

    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...

随机推荐

  1. mysql 慢查询时间

    只有当一个query执行时间(不包括锁等待的时间)>long_query_time的时候,才会判定会slow log: 但是判定为slow log之后,输出包括Query_time(执行时间+锁 ...

  2. 阿里云免费SSL证书绑定+sever2012 IIS配置

    1.阿里云域名 2.点击证书 3.免费证书 4.下载证书 5.服务器-运行-mmc 进入制台程序 6.制台程序,选择菜单“文件"中的"添加/删除管理单元”-> “添加”,从“ ...

  3. Spring MVC异常处理SimpleMappingExceptionResolver

    Spring MVC异常处理SimpleMappingExceptionResolver[转] (2012-12-07 13:45:33) 转载▼ 标签: 杂谈 分类: 技术分享 Spring3.0中 ...

  4. 微信小程序——文本的展开与收起

    动态效果如下: 就是默认只显示4行,点击展开的按钮显示全部,再点击隐藏. 主要通过css来控制 主要的css: .flex-text{ margin-top: 10px; display: -webk ...

  5. node学习笔记2——搭建服务器

    搭建服务器关键词: require('http') —— 请求 node 里面的 http 模块 createServer —— 创建一个服务器 request —— 请求 response—— 响应 ...

  6. Java Servlet生成JSON格式数据并用jQuery显示

    1.Servlet通过json-lib生成JSON格式的数据 import java.io.IOException;import java.io.PrintWriter;import java.uti ...

  7. MultipleActiveResultSets=true 数据库连接复用

    注:EF连接Mysql时,连接字符串是不能包含MARS的,Mysql不支持这个特性. ADO.NET 1.n 利用SqlDataReader读取数据,针对每个结果集需要一个独立的连接. 这些独立的链接 ...

  8. 【转载】C#反射机制详解

    反射的定义:审查元数据并收集关於它的类型信息的能力,元数据(编辑后的基本数据单元)就是一大堆表,编译器会创建一个类定义表,一个字段定义表,一个方法定义表等,System.Reflection命名空间包 ...

  9. 嵌入式开发之uart---rs232 和rs485 和rj45和usb简介

    (1) profilebus和can(control控制器局域网)和hub(集线器) (uart)通用异步传输 rs232: ibm 提出的,两根线,按位bit传输,是端到端的单信号电平模式,理论上有 ...

  10. Linux系统date时间设定

    修改linux系统的时间EDT和EST为CST EDT:指美国东部夏令时间 EST:英国时间 CST:北京时间 那么现在只要改成北京时间的时区CST就可以了,修改如下: [root@localhost ...