参考：
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. Java编程的逻辑 (54) - 剖析Collections - 设计模式

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  2. DbgPrint/KdPrint输出格式控制

    在驱动编程学习中,往往需要通过DbgPrint或者KdPrint来输出调试信息,对于Check版本,KdPrint只是DbgPrint的一个宏定义,而对于Free版本,KdPrint将被优化掉.这些输 ...

  3. drupal drush 在windows下的安装和配置

    一.windows下drupal的安装 参考官网:https://www.drupal.org/node/594744 drush下载:https://github.com/drush-ops/dru ...

  4. mysql show global variables字符超1024会被截断

    show variables 会存在数据被截断的问题: select 全局变量没有问题 官网解释:https://dev.mysql.com/doc/refman/5.6/en/variables-t ...

  5. svn cleanup失败

    今天用SVN的时候出现被锁定的情况,既不能更新代码也不能提交. 解决方法如下: 1. 在被锁定的文件夹上点右键,找到并点击Clean up菜单项 2. 在Cleanup对话框中勾选“Break loc ...

  6. awk的替代先sort 再uniq -c 再sort ,uniq只能队相邻的起作用sort先让之间相邻再sort,最后sort是数量排序

    [root@localhost ~]# cat aa.txt |sort|uniq -c|sort -nk1 1 22\ 1 44 1 55\ 1 bb 1 dd 1 ff 1 gg 1 kk 1 o ...

  7. .NET中常见加解密算法

    一.MD5不可逆加密 不可逆加密是指将原文加密成密文以后,无法将密文解密成原文. MD5的算法是公开的,无论是哪种语言,只要需要加密的字符串是相同的,那么经过MD5加密以后生成的结果都是一样的. .N ...

  8. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  9. Android Studio安装Kotlin插件

    1 Kotlin语言介绍 Kotlin 是 JetBrains 在 2010 年推出的基于 JVM 的新编程语言,是一种新的静态类型编程语言.开发者称,设计它的目的是避免 Java 语言编程中的一些难 ...

  10. 《FPGA全程进阶---实战演练》第一章之如何学习FPGA

    对于很多初学者,大部分都是急于求成,熟不知越是急于求成,最终越是学无所成,到头来两手空空,要学好FPGA,必须弄懂FPGA本质的一些内容. 1.FPGA内部结构及基本原理 FPGA是可以编程的,必须通 ...