<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Video视频截图</title>

<style>

body, h1, h2, p { margin:0; padding:0; }

html { font-family:"微软雅黑"; background-color:#e9e9e9; }

h1 { font-size:24px; font-weight:normal; padding:20px 0; text-align:center; color:#858585; background:-webkit-linear-gradient(rgba(0, 186, 255, .8), rgba(0, 130, 255, .8)); border-bottom:1px solid #009cff; color:#FFF; margin-bottom:50px; }

video { display:block; margin:0 auto 30px auto; }

canvas { display:none; }

button { display:block; width:480px; height:50px; font-size:24px; margin:0 auto; border:1px solid #0085ff; color:#FFF; background:-webkit-linear-gradient(rgba(80, 170, 255, .8), rgba(0, 132, 255, .8)); cursor:pointer; border-radius:5px; margin-bottom:30px; }

button:hover { background:-webkit-linear-gradient(rgba(0, 132, 255, .8), rgba(80, 170, 255, .8)); border-color:#1988ff; }

h2, p { width:480px; margin:0 auto; color:#858585; }

h2 { margin-bottom:1em; font-size:18px; }

p { font-size:14px; line-height:24px; }

</style>

<script>

window.onload = function () {

  var button = document.querySelectorAll('.screen')[0];

  var video = document.querySelectorAll('video')[0];

  var canvas = document.querySelectorAll('canvas')[0];

  var ctx = canvas.getContext('2d');

  var width = 480;

  var height = 270;

  canvas.width = width;

  canvas.height = height;

  video.src = 'video/temp.mp4?t=' + new Date().getTime();

  video.width = width;

  video.height = height;

  video.controls = true;

  video.autoplay = true;

  video.loop = true;

  button.onclick = function () {

    ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里

    saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存储图片到本地

  };

};

function saveImage (canvas, filename) {

  var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');

  saveFile(image, filename || 'file_' + new Date().getTime() + '.png');

}

function saveFile(data, filename) {

  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

  save_link.href = data;

  save_link.download = filename;

  var event = document.createEvent('MouseEvents');

  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

  save_link.dispatchEvent(event);

}

</script>

</head>

<body>

<h1>Video视频截图</h1>

<video>仅支持H264格式MP4</video>

<canvas></canvas>

<button class="screen">截图</button>

<h2>当前，video 元素支持三种视频格式：</h2>

<p>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</p>

<p>MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</p>

<p>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</p>

</body>

</html>

利用HTML5的Video进行视频截图并保存到本地的更多相关文章

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

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

  2. 用原生JS和html5进行视频截图并保存到本地

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  4. 对html进行截图并保存为本地图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  6. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  7. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  8. Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）

    1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  9. IOS批量截取视频截图 UIImage mp4 IOS Video

    IOS批量截取视频截图 //生成截图 NSString *path = [NSHomeDirectory() stringByAppendingString:@"/Documents&quo ...

随机推荐

  1. sql 入门经典（第五版） Ryan Stephens 学习笔记 第五部分： 性能调整

    第十六章: 利用索引改善性能 1. create index 单字段索引:  create index index_name on table_name (column_name);唯一索引:     ...

  2. 在WPF控件上添加Windows窗口式调整大小行为

    起因 项目上需要对Canvas中的控件添加调整大小功能,即能在控件的四个角和四条边上可进行相应的拖动,类似Windows窗口那种.于是在参考以前同事写的代码基础上,完成了该功能. 代码实现 Adorn ...

  3. Unity3d+Jenkins 自动编译iOS、Android版本

    1.在Unity3d中, 创建导出 iOS.Android 项目脚本 PerformBuild.cs ,放在Editor目录下(必须),如下: using UnityEditor; using Sys ...

  4. 从Maya中导入LightMap到unity中

    导入步骤 1.在Maya中为每一个模型烘焙好帖图(tif格式),会发现烘焙好的图和UV是一一对应的 2.把模型和烘焙帖图导入到Unity中 3.选中材质,修改Shader为 Legacy Shader ...

  5. 最短路径—Dijkstra算法

    Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Di ...

  6. PowerDesigner16建表在SQL SERVER 2008报 对象名 'sysproperties' 无效。

    http://blog.itpub.net/30150152/viewspace-1454979/

  7. web前端性能意义、关注重点、测试方案、优化技巧

    1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...

  8. CSS 动画之九-会呼吸的信封

    新年已经到来,各个网站都举办着各种不同类型的活动,'会呼吸的信封'有可能就是你遇到的其中一种.其实就是一个信封的样式,在封口处加上开合开合的动画效果,吸引用户去打开这个信封,点击后可能会送红包,优惠券 ...

  9. python数字图像处理（2）：图像的读取、显示与保存

    skimage提供了io模块,顾名思义,这个模块是用来图片输入输出操作的.为了方便练习,也提供一个data模块,里面嵌套了一些示例图片,我们可以直接使用. 引入skimage模块可用: from sk ...

  10. 信息安全系统设计基础实验一 20135211&20135216

    北京电子科技学院(BESTI) 实 验 报 告 封面 课程:信息安全系统设计基础              班级:1352           姓名:(按贡献大小排名)李行之 刘蔚然          ...