参考：
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. android开发(41) Fragment中使用POP_BACK_STACK_INCLUSIVE达到一次跳转到栈底。类似Activity的 采用FLAG_ACTIVITY_CLEAR_TOP

    需求场景: 在开发中遇到下面这样场景: 1.创建 Fragment A 显示.  这时栈的结构是: .Fragment A 2.创建 Fragment B 并 显示.  从下到上看,这时栈的结构是: ...

  2. TiDB 源码阅读系列文章（一）序

    原创: 申砾 PingCAP  2018-02-28 在 TiDB DevCon2018 上,我们对外宣布了 TiDB 源码阅读分享活动,承诺对外发布一系列文章以及视频帮助大家理解 TiDB 源码.大 ...

  3. Java设计模式（12）迭代模式（Iterator模式）

    上了这么多年学,我发现一个问题,好象老师都很喜欢点名,甚至点名都成了某些老师的嗜好,一日不点名,就饭吃不香,觉睡不好似的,我就觉得很奇怪,你的课要是讲的好,同学又怎么会不来听课呢,殊不知:“误人子弟, ...

  4. Namenode HA原理详解（脑裂）

    转自:http://blog.csdn.net/tantexian/article/details/40109331 Namenode HA原理详解 社区hadoop2.2.0 release版本开始 ...

  5. I2C上拉电阻

    在一些PCB的layout中,大家往往会看到在I2C通信的接口处,往往会接入一个4.7K的电阻,有的datasheet上面明确有要求,需要接入,有的则没有要求.   I2C接口 对于单片机来讲,有些I ...

  6. php 从1加到100

    <?php //1-100利用for循环1-100累加 $sum=0;//初始化sum值为0 for($i=1;$i<=100;$i++)//定义i,循环次数,一般求1-100的和,从1开 ...

  7. e835. 使JTabbedPane中的卡片生效和失效

    By default, all new tabs are enabled, which means the user can select them. A tab can be disabled to ...

  8. Android中的缩略图加载-不浪费一点多余的内存

    1. Why,为什么要加载缩略图? 有的时候不需要展示原图,只需展示图片的缩略图,可以节省内存.比如:网易新闻中的图片浏览,左边展示的小狮子图片就是一个缩略图,点击这个图片,才会展示原图.   2. ...

  9. （实用）Ubuntu Linux静态IP网络配置

    记录备忘. 基于Ubuntu 14.04 LTS Server. 首先查看一下当前系统的网卡: $ sudo iconfig 比如这里我除了回环网路lo外,网络接口名为em1,下面就去给它配置网络. ...

  10. Sql Server数据库监听 c#代码

    using AnfiniL.SqlServerTools.Data; using SqlServerTools; using SqlServerTools.Data; using System; us ...