参考：
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. Hbase 学习（二）补充 自定义filter

    本来这个内容是不单独讲的,但是因为上一个页面太大,导致Live Writer死机了,不能继续编辑了,所以就放弃了 这里要讲的是自定义filter,从FilterBase继承 public class ...

  2. PCL特征点与配准（1）

    关于输入一个具体的物体的点云,从场景中找出与该物体点云相匹配的,这种方法可以用来抓取指定的物体等等,具体的代码的解释如下,需要用到的一些基础的知识,在之前的博客中都有提及,其中用到的一些方法可以翻阅前 ...

  3. 最近玩Bootstrap ， 一些小工具 记录在案。

    最近玩Bootstrap , 一些小工具 记录在案. 1 定制Bootstrap ,所见即所得的修改Bootstrap的各种变量,即时查看样式的变化. http://bootswatchr.com/ ...

  4. Python 匿名参数

    #-*- coding:utf-8 -*- #匿名函数 #匿名函数语法格式 ''' 变量 = lambda 参数列表:表达式 ''' func = lambda x,y:x+y a = func(2, ...

  5. USB学习笔记连载（二十）：FX2LP如何实现高速和全速切换（转载）

    CYPRESS的USB外设控制器CY7C68013A是一款广泛应用于USB打印机,手机,存储设备,USB测试等多个领域的经典产品.该产品符合USB2.0协议规范,支持full speed和high s ...

  6. SpringMVC系列（二）: SpringMVC各个注解的使用

    1.@RequestMapping 1.@RequestMapping除了能修饰方法,还能修饰类(1)修饰类:提供初步的请求映射信息,相对于web请求的根目录(2)修饰方法:提供进一步的细分映射信息相 ...

  7. Spring JDBC SimpleJdbcCall类示例

    org.springframework.jdbc.core.SimpleJdbcCall类是表示对存储过程或存储函数的调用的多线程,可重用的对象. 它提供元数据处理以简化访问基本存储过程/函数所需的代 ...

  8. spring oxm入门（包含demo）

    O/X Mapper 是什么? Spring 3.0 的一个新特性是 O/X Mapper.O/X 映射器这个概念并不新鲜,O 代表 Object,X 代表 XML.它的目的是在 Java 对象(几乎 ...

  9. log4net按照不同的【LEVEL】级别输出到不同文件

    Log4net按照不同级别写入多个日志文件 2012-02-08 15:06 by Fred-Xu, ... 阅读, ... 评论, 收藏, 编辑 在一个Web应用项目中,我使用了Fluent NHi ...

  10. C# 在多线程环境中，进行安全遍历操作

    本文以List作为操作对象MSDN官方给出的List的线程安全的说法:此类型的公共静态成员是线程安全的.但不能保证任何实例成员是线程安全的.只要不修改该集合,List 就可以同时支持多个阅读器.通过集 ...