<!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 = '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进行视频截图并保存到本地

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

  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 遍历文件夹分析xml并保存

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

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

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

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

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

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

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

  9. Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

    由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...

随机推荐

  1. js职责链模式

    职责链模式(Chain of Responsiblity),使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为 ...

  2. 5.3 Razor语法基础

    以往开发ASP.NET Web Form时,在ASPX页面上都会出现许多夹杂C#/VB.NET与HTML的情况,而先前使用<%...%>这种传统圆角括号的表示法会让HTML标签与ASP.N ...

  3. ICE 的回调

    使用分布式计算中间件ICE到现在已经有一年多了,在这一年里里面对ICE的理解.应用比较熟悉. 使用ICE写分布式软件,确实是很方便:ICE比较稳定.可靠,调用返回速度低延迟,使用简单,学习曲线不是很陡 ...

  4. php-fpm 和 mysql 之间的关系

    我们都知道,php是不能直接操作 mysql的,他需要通过扩展提供接口调用,php的mysql扩展也好几个,只支持面向过程的mysql,既支持面向过程也支持面向对象的mysqli,只支持面向对象的PD ...

  5. redis实战之事务与持久化

    1. 事务描述 (1)什么是事务 事务,就是把一堆事情绑在一起,按顺序的执行,都成功了才算完成,否则恢复之前的样子 事务必须服从ACID原则,ACID原则分别是原子性(atomicity).一致性(c ...

  6. 畅通工程（自己写的BFS，但后面想了下并查集更好更快）

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可). ...

  7. [Luogu3727]曼哈顿计划E

    luogu 题意(简化版) 给你一棵树,每个点上有一个\(SG\)值,问你是否存在一条路径使得\(SG\)异或和为\(0\). sol 可以当做每个点的稳定值就是这个点上的石子数量. 很显然我们只需要 ...

  8. Httpclient远程调用WebService示例

    我们将Web Service发布在Tomcat或者其他应用服务器上后,有很多方法可以调用该Web Service,常用的有两种: 1.通过浏览器HTTP调用,返回规范的XML文件内容      2.通 ...

  9. Oracl使用总结二

    1.ORA-00972: 标识符过长 错误排除 可能原因: 1.如果是拼接成的sql语句,请查找传递参数时字符型字段是否两边少了引号.2.数据库表名太长了,附各种类型的数据库表名长度: SQLSERV ...

  10. SQL Server 学习系列之六

    SQL Server 学习系列之六 SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) SQL Server 学习系列之三(SQL 关键字) SQ ...