<!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 - 使用&lt;video&gt;播放视频

    ,下面是一个播放视频的最简单样例 (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. javascript_core_09之继承、属性、对象

    1.OOP之修改继承: ①child._proto_=father:=>Object.setPrototypeOf(child,father):每次只能修改一个对象的父对象: ②构造函数.pro ...

  2. ecshop /flow.php SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECSHOP的配送地址页面网页没有验证地区参数的有效性,存在sql注入漏 ...

  3. C# 命令绑定

    在构建WinForm程序中,为了使系统的结构清晰,有好的用户交互体验,实现不同按钮之间的交互,不使主窗体里面的代码臃肿.将按钮的命令通过类进行绑定,实现命令的管理使很有必要的. 该文章是将如何实现Bu ...

  4. XML自己定义检查器语法+约束(1)

    每次使用它检查xml文件时,仅仅需改动xmldoc.load("xml文件名称");中的文件名称,然后将该文件放在浏览器中执行就可以. 依据浏览器弹出的对话框进行推断自己写的xml ...

  5. asp.net MVC 3多语言方案--再次写, 配源码

    之前写了一篇asp.net MVC多语言方案,那次其实是为American Express银行开发的.有许多都是刚开始接触,对其也不太熟悉.现在再回过头去看,自己做一个小网站,完全用asp.net m ...

  6. raft如何实现leadership transfer

    leadership transfer可以把raft group中的leader身份转给其中一个follower.这个功能可以用来做负载均衡,比如可以把leader放在性能更好的机器或者离客户端更近的 ...

  7. 【学习】ie-css3.htc---让ie8以下支持css3

    学习了偶象大神的一篇文章:<让IE6/IE7/IE8浏览器支持CSS3属性>http://www.zhangxinxu.com/wordpress/?p=783 亲自实践了一下,主要是bo ...

  8. JS膏集05

    JS膏集05 1.复习 闭包内的函数也可以使用参数 闭包的建议写法 ) 2.浅拷贝 相当于把一个对象中的所有的内容复制一份给另一个对象.直接复制. 或者说,就是把一个对象的地址给了另一个对象,它们指向 ...

  9. JQuery:聚焦清空输入框值,失焦恢复默认值

    本来这个小玩意很简单,不用记录到博客里,但今天是娱乐日,要快落一天,为了减轻负罪感,假装自己又学了点新东西 <!DOCTYPE html> <html> <head> ...

  10. 二进制中1的个数(python)

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. # -*- coding:utf-8 -*- class Solution: def NumberOf1(self, n): ...