js截屏 video_用原生JS和html5进行视频截图并保存到本地
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; }
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);
}
Video视频截图
仅支持H264格式MP4
截图
当前,video 元素支持三种视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
js截屏 video_用原生JS和html5进行视频截图并保存到本地相关推荐
- android easyplayer截屏,EasyWasmPlayer H265播放器是如何实现视频截图功能的?
在我们做视频开发的过程中,会遇到不少需求,其中视频截图就是一个比较常见的需求,因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候,我们都会在原有开发的基础上对视频截图进行一些功能拓展 ...
- js截屏以及three.js场景截屏
做这个功能都是半个月之前的事情了,没想到一直耽误却一直都没有写下总结,尴尬.....来来来,说正事 在手机端截屏完全不需要前端动什么脑子,但是在网页上截屏就很头疼了,我这里介绍两种情形,针对普遍和某一 ...
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- js截屏代码_JavaScript网页截屏方法,你get到了嘛?
之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容 ...
- js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- js截屏代码_服务端浏览器截屏
服务端浏览器截屏是结合 selenium + html2canvas 实现的通过在 Chrome 环境下生成图片. selenium是最广泛使用的开源Web UI自动化测试套件之一.本文中使用sele ...
- js截屏 video_video结合canvas实现视频在线截图功能
给大家讲解下我前几天看到的一个有趣小demo:视频在线截图.以下是我修改和添加了新功能后的效果图: 是不是很酷,其实挺简单的,下面就给大家讲讲怎么弄哈. 这里主要分为三大块功能,首先是第一个: 利用U ...
- js截屏工具(html2anvas)
首先不会像其它文章一样把文档搬过来解释一边.而是在实际项目中实际使用来写. 目录 前言 一.用前须知 二.项目实际使用 1.项目描述 2.使用步骤 3.图片跨域问题 4.css样式问题 最后 前言 网 ...
- js截屏 video_jQuery+html5实现视频截图方法
Capture js部分: (function() { "use strict"; var video, $output; var scale = 0.25; var initia ...
最新文章
- python中的装饰器有哪些-Python中的@函数装饰器到底是什么?
- linux下查看线程数的几种方法
- 完成GitHub个人主页设计,只需要这三步
- WWDC 2013 Session笔记 - iOS7中的多任务
- 分布式版本控制系统Git的安装和使用
- Django 之 权限系统(组件)
- 北京Uber优步司机奖励政策(3月11日)
- 轻量级持久存储系统 MemcacheDB
- 关于CefSharp在客户端运行报错的解决方案
- 保存Google、Bing翻译的语音
- 《Arduino》开发 之 用 u8g2 库 给 0.96寸OLED 刷bmp图片,OLED图片取模
- 考研数学:常见的的泰勒公式
- 银行业务总揽之-银行对公业务
- 宝藏又小众的覆盖物PBR多通道贴图素材网站分享
- HHUOJ 1389 出栈合法性
- win10系统删除chrome浏览器输入框的历史记录
- 自媒体时代如何做好软文推广?
- 怎么登陆和退出MySQL
- 基于javaweb+jsp的鲜花花卉销售管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot)
- Android VideoView播放网络视频简介
热门文章
- SAP HANA,S/4HANA 和 SAP BTP 的辨析
- 如何在 SAP Commerce Cloud Portal 构建和部署 SAP Spartacus Storefront
- 使用了SAP Spartacus的一个在线网站:乐高Storefront
- 在Angular应用的child Component里同时使用@Input和@Output
- 如何将Java工程导出成可以执行的jar
- 一个免费的网站长链接转短链接的工具
- after markup mount - how is converted source code got executed
- SAP ui5 jQuery.sap.getModulePath(FioriTest)
- Jerry Wang的ABAP Development Tool培训材料 - SAP 引入ADT的初衷
- SAP CRM Business transaction save mode