支持并尊重原创！原文地址：http://www.cnblogs.com/xieshuxin/p/6731637.html

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

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

     <style>

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

         html { font-family:"微软雅黑"; }

         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 = 'movie.mp4?t=' + new Date().getTime();

             video.width = width;

             video.height = height;

             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) {

             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>

【转载】用原生JS和html5进行视频截图并保存到本地的更多相关文章

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

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

  2. 利用HTML5的Video进行视频截图并保存到本地

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

  3. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

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

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

  5. 转载 -- 基于原生JS与OC方法互相调用并传值（附HTML代码）

    最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点就是方法的互相调用而已. 本文叙述下如何进行原生的JavaScript交互 本 ...

  6. 【转载】 原生js判断某个元素是否滚动到底部

    document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...

  7. 原生js 遍历文件夹分析xml并保存

    其实这种功能,网上相关的代码多的是,我也是因为今天正好要用到这个功能,所以临时写了下,放这里保存下,以便将来自己或者别人用的上吧. 当然我写的是一个hta文件.下面是完整js代码,都是调用active ...

  8. 用html5的canvas生成图片并保存到本地

    原文:http://www.2cto.com/kf/201209/156169.html 前端的代码: [javascript]  function drawArrow(angle)  {      ...

  9. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

随机推荐

  1. 封装hibernate中session（静态单例模式）

    因为每次用增删改查时都需要用到session,直接做一个类,需要的时候只需要调用即可 import org.hibernate.Session; import org.hibernate.Sessio ...

  2. 利用 innodb_force_recovery 解决MySQL服务器crash无法重启问题

    背景      MySQL服务器因为磁盘阵列损坏机器crash,重启MySQL服务时 报如下错误: InnoDB: Reading tablespace information from the .i ...

  3. VS2010 将程序发布至网站时，发生错误“未能给 bin/Debug/publish//setup.exe 签名“

    VS2010 将程序发布至网站时,发生错误“未能给 bin/Debug/publish//setup.exe 签名“  错误:   因为某项目未能生成,所以无法发布. ---------------- ...

  4. PostgreSQL full_page_write记录

    PostgreSQL 在 checkpoint 之后在对数据页面的第一次写的时候会将整个数据页面写到 xlog 里面. 当出现主机断电或者OS崩溃时,redo操作时通过checksum发现“部分写”的 ...

  5. Win7系统64位环境下使用Apache——Apache2.4整合Tomcat与mod_jk

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/70398091 本文出自[我是干勾鱼的博客] 之前的几篇文章: Win7系统64位 ...

  6. 可视化CNN神经网路第一层参数

    在上Andrew Ng的课的时候搜集到了课程里面自带的显示NN参数的代码,但是只能显示灰度图,而且NN里的参数没有通道的概念.所以想要获得可视化CNN的参数,并且达到彩色的效果就不行了. 所以就自己写 ...

  7. 有效处理Java异常三原则

    Java中异常提供了一种识别及响应错误情况的一致性机制,有效地异常处理能使程序更加健壮.易于调试.异常之所以是一种强大的调试手段,在于其回答了以下三个问题: 什么出了错? 在哪出的错? 为什么出错? ...

  8. Linux 工具套件 —— binutils、readelf

    readelf:Linux 下专门针对 ELF 文件格式的解析器: 0. binutils GNU Binutils gnu binutils 一套二进制工具的集合,主要包含:ld(gnu linke ...

  9. 同一局域网环境下的arp欺骗和中间人攻击（mac）

    最近读了一篇有关arp欺骗和中间人攻击的文章,于是乎就想着自己实现一下,顺便验证下微信在回话劫持后的安全性. 1.本机环境 Macbook Air:OS X 10.11 El Captain 2.推荐 ...

  10. 【占位】HihoCoder1317 跳舞链

    跳舞链 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho最近遇到一个难题,他需要破解一个棋局. 棋局分成了n行,m列,每行有若干个棋子.小Ho需要从中选择若干行使得 ...