视频录制，压缩实现源码
实现代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> --><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="./js/gif.js" type="text/javascript" charset="utf-8"></script><script src="./js/vconsole.min.js"></script><script>new VConsole();</script></head><body><div id="app"><div><input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" /><div><div v-if='videoSize'>视频大小：{{videoSize}}</div><div v-if='videoLength'>视频时长：{{videoLength}}</div><div><video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controlsmuted></video><canvas id="canvas" :width="winWidth" :height="winHeight"></canvas></div></div></div></div><script type="text/javascript">var app = new Vue({el: '#app',data: {videoSize: '',videoSrc: '',videoLength: '',isAndroid: false,fileAndroid: {},winWidth: 300,winHeight: 300,gifSetTime: false,gif: '',},created() {//判断终端var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {console.log('isAndroid')this.isAndroid = true;} else if (isiOS) {console.log('isiOS')this.isAndroid = false;}},mounted() {//初始gifthis.gif = new GIF({workers: 1,quality: 1000,width: this.winWidth,height: this.winHeight,workerScript: '../../static/js/gif.worker.js',});},methods: {//input文件走向changeVideo(e) {console.log('input文件走向')var file = e.target.files[0];const video = document.getElementById('myvideo');if (file !== undefined) {console.log('有文件')//判断走向if (this.isAndroid) {console.log('是安卓手机')//视频开始播放video.removeEventListener('play', this.videoPlay, false);//视频播放完video.removeEventListener('ended', this.videoEnded, false);this.androidFile(file);} else {console.log('不是安卓手机')this.iphoneFile(file);}}},//IOS拍摄视频iphoneFile(file) {const that = this;//视频字节大小this.videoSize = (file.size / 1024/1000).toFixed(2) + "Mb";var url = null;//file转换成blobif (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}this.videoSrc = url;if (file.size < 2100000 && file.size > 500000) {this.uploadVideo(file);} else if (file.size >= 2100000) {alert('视频太大，请限制在10秒内')} else {this.$vux.toast.text('视频录制不能少于5秒');}},//安卓拍摄视频androidFile(file) {//视频字节大小// this.videoSize = file.size;this.videoSize =( file.size / 1024/1000).toFixed(2) + "Mb";const that = this;const video = document.getElementById('myvideo');const canvas = document.getElementById('canvas');var context = canvas.getContext('2d');this.gifSetTime = true;this.gif.abort()this.gif.frames = [];//file转base64var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function() {that.videoSrc = this.result;// console.log('---------that.videoSrc------',that.videoSrc)video.play();}//视频开始播放video.addEventListener('play', this.videoPlay, false);//视频播放完video.addEventListener('ended', this.videoEnded, false);this.gif.on('finished', function(blob) {if (that.fileAndroid.size == blob.size) return;console.log("gif的blob文件", blob);that.fileAndroid = that.convertBase64UrlToFile(blob);console.log('that.fileAndroid.size',that.fileAndroid.size)// this.videoSize =that.fileAndroid.sizethis.videoSize =(that.fileAndroid.size / 1024/1000).toFixed(2) + "Mb";that.uploadVideo(that.fileAndroid);});},//视频开始播放videoPlay() {const that = this;const video = document.getElementById('myvideo');const canvas = document.getElementById('canvas');var context = canvas.getContext('2d');console.log("视频时长", video.duration);this.videoLength = video.duration + '秒';//画布上画视频，需要动态地获取它，一帧一帧地画出来var times = setInterval(function() {context.drawImage(video, 0, 0, that.winWidth, that.winHeight);that.gif.addFrame(context, {copy: true});if (that.gifSetTime == false) {clearInterval(times);}}, 200);},//视频播放完videoEnded() {this.gifSetTime = false;console.log("视频播放完毕！")this.gif.render();},//blob to fileconvertBase64UrlToFile(blob) {var d = new Date().getTime();var type = 'image/gif'return new File([blob], "fileGif-" + d + '.gif', {type: type});},//上传视频uploadVideo(file) {console.log("上传的视频文件", file)},}});</script><style></style></body>
</html>
相关文章：
alexa技能个数_如何在您的技能中使用Alexa演示语言
alexa技能个数by Garrett Vargas通过Garrett Vargas 如何在您的技能中使用Alexa演示语言 (How to use Alexa Presentation Language in your skill) Amazon recently released the Alexa Presentation Language (APL). APL provides a richer display for multimodal skills. …
HTML与XML总结
阅览《孙欣HTML》和《刘炜XML》过了一段时间，在这里学到的内容用思维导图来概括。HTML与XML都是标记语言。 同样点： HTML文档与XML文档有类似的结构。前者是（head和body）后者是（声明和主体），大致…
ant PageHeaderWrapper 返回上一页
PageHeaderWrapper 返回上一页实现代码： <PageHeaderWrappertitle{false}content{<a onClick{() > router.goBack()}><Icon type"left" />返回</a>}breadcrumb{{routes: [{ path: /, breadcrumbName: 首页 },{ path: /pay_orde…
ruby 新建对象_Ruby面向对象编程的简介
ruby 新建对象by Saul Costa由Saul Costa Object-oriented programming (OOP) is a programming paradigm organized around objects. At a high level, OOP is all about being able to structure code so that its functionality can be shared throughout the application.…
ASP.NET导出文件FileResult的使用
本文给大家讲一下ASP.NET MVC中如何使用FileResult来导出文件，首先网上相关例子有很多大神都有讲，我在这只是稍微说一点不同——为什么我的导出没有反应呢？ 这个问题，我找了半天也没有找到，最后是在一个网友的评论中体…
【AHOI 2016初中组】 自行车比赛 - 贪心
题目描述 小雪非常关注自行车比赛，尤其是环滨湖自行车赛。一年一度的环滨湖自行车赛，需要选手们连续比赛数日，最终按照累计得分决出冠军。今年一共有 N 位参赛选手。每一天的比赛总会决出当日的排名，第一名的选手会获得 N 点得分&…
【Ant Design Pro 三】样式动态绑定 react样式绑定
第一步，创建样式文件，在页面目录下根据自己习惯创建一个less文件，用来写样式类 第二部，引用该文件 import styles from ./details.less; //details.less 代码： .menu {width: 95%; } .navigation-menu{width: 90%; …
react hooks使用_如何使用React和Hooks检测外部点击
react hooks使用by Andrei Cacio通过安德烈卡西奥(Andrei Cacio) 如何使用React和Hooks检测外部点击 (How to detect an outside click with React and Hooks) “外部点击”是什么意思？ (What does “Outside Click” mean?) You can think of it as the “anti-b…
正则表达式（1）
正则表达式的概念 正则表达式是一个字符串，使用单个字符串来描述、用来定义匹配规则，匹配一系列符合某个句法规则的字符串。在开发中，正则表达式通常被用来检索、替换那些符合某个规则的文本。 正则表达式的匹配规则 字符类：[abc]…
Android 曲线动画animation，类似加入购物车动画
按照惯例先放效果图：图中小球做抛物线运动 资源图片 1.首先布局文件activity_main.xml，布局很简单，就一个测试按钮 1 <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"2 xmlns:tools"http:…
小程序音频播放报10001 解决方案 errCode:10001， errMsg:errCode:602,err:error,not found param
音频播放有两种方式： 第一种： innerAudioContext.src audioSrc;innerAudioContext.play(); 第二种： innerAudioContext.autoplay true;innerAudioContext.src audioSrc; 之前使用第一种，华为手机不能正常播放，…
在线学位课程_您在四年制计算机科学学位课程中学到的知识
在线学位课程by Colin Smith通过科林史密斯 您在四年制计算机科学学位课程中学到的知识 (What you learn in a 4 year Computer Science degree) I recently wrote an article on whether you need a computer science degree to get a job in tech. I thought that going ove…
Swift学习笔记-协议(Protocols)
1.0 翻译：geek5nan 校对：dabing1022 2.0 翻译：futantan 校对：小铁匠Linus 定稿：shanksyang 本页包含内容： 协议的语法（Protocol Syntax）对属性的规定（Property Requireme…
JavaScript简单重写构造器的原型
1 //简单重写原型对象：2 3 //一个构造函数Person4 function Person(){5 6 }7 //重写Person的原型8 //把Person的原型赋值给一个新的对象 是我们重写的过程9 Person.prototype{ 10 // 对于构造器 如果我们不给他写，则构造器就是Object的构造器了 …
node.js cannot find module
找不到模块的解决方案 ： 把node_module整个文件夹删掉,然后npm clean cache,看下package.json里有没有express的依赖项,有的话直接npm install,没有的话 npm install express --save。 有人说 npm clean cache 命令变成了 npm cache clean，可以都试一下
我在React Native中构建时获得的经验教训
by Amanda Bullington通过阿曼达布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while building in React Native) When I received an offer for a software engineering role to build an app in React Native, I wasn’t sure what…
【Ant Design Pro 五】箱套路由在菜单栏显示返回上一页
效果图： 场景：从菜单栏进入子页面，但是子页面默认不在路由显示，完成操作后需要返回上级页面。所以要在菜单栏中加返回的功能。 实现代码： import React from react; import { Button, Card, Icon } from antd; impor…
[002] The Perks of Being a Wallflower - 读后记
The Perks of Being a Wallflower 今天(2015年10月30日 18:26:17)读完"The Perks of Being a Wallflower". 本书290页,我是在小米pad上完成阅读的,epub格式,花费四天时间,每天至少5小时. 生词很多,就不一一列出了. 使用透析法并不强求完全的正确理解原文.强调完整的阅…
ios集成firebase_如何将Firebase与您的应用程序集成
ios集成firebaseYou’ve probably heard about Firebase, but may not know much about how it works and how it fits in with your application. Well, you’ve come to the right place. We’ll go over what Firebase is and how to integrate it with your Android projec…
PLSQL创建Oracle定时任务
转自：http://www.cnblogs.com/yx007/p/6519544.html#_label0转载于:https://www.cnblogs.com/good-tomorrow/p/7443817.html
判断h5是不是在小程序中
执行代码： if (ua.indexOf(MicroMessenger) -1) {//说明不在微信中// 走不在小程序的逻辑 } else {wx.miniProgram.getEnv(function(res) {if (res.miniprogram) {// 走在小程序的逻辑} else {// 走不在小程序的逻辑}}) }
CSS3关于过渡效果的问题
首先trasition:transform只是单单表示后面只要有含有的tranform的所有属性可以参与动画，而trasition:all表示后面所有动画属性都可以参动画，当父容器有relative时，子容器有absolute，子容器会跟着父容器相对定位。当你想要然后一个…
在线学位课程_如何选择计算机科学学位课程
在线学位课程by Colin Smith通过科林史密斯 如何选择计算机科学学位课程 (How to choose a Computer Science degree program) I remember combing through the countless computer science programs online and feeling a bit lost on what I should be looking for. I ended…
Dubbo 入门实例 本地伪集群测试Demo
1. 概述 Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案 Dubbo是阿里巴巴SOA服务化治理方案的核心框架，每天为2,000个服务提供3,000,000,000次访问量支持，并被广泛应用于阿里巴…
Vue源码终笔-VNode更新与diff算法初探
写完这个就差不多了，准备干新项目了。 确实挺不擅长写东西，感觉都是罗列代码写点注释的感觉，这篇就简单阐述一下数据变动时DOM是如何更新的，主要讲解下其中的diff算法。 先来个正常的html模板： <body><div id…
JS获取当月每天的日期，JS获取本周每天的日期
获取当前月每天的日期，获取当前周每天的日期实现代码： 调用代码： console.log(-----------------, getNowM(), getWeekDay()) 结果：我今天是2020-2-28日 封装方法： function getDay(num, str) {var today new Dat…
@Scheduled注解的scheduler属性什么作用
注解是 Spring Framework 提供的一种机制，用于定义计划任务，即周期性执行的任务。 注解可以应用于方法上，以指示 Spring 容器在特定的时间间隔或按照某种调度规则来调用该方法。 属性是 注解的一个可选属性，它的作用是允许开发者指定一个自定义的 对象来控制任务的调度方式。默认情况下， 注解使用 Spring 内部的 来执行任务，但如果需要更高级的定制化需求，可以通过 属性指定一个自定义的 实现。自定义调度器:共享调度器资源:高级调度需求:假设你想使用 作为调度器，并且希望所有带有
自行车车把会吧车刮坏吗_花10分钟即可开始使用车把
自行车车把会吧车刮坏吗by Wing Puah永帕(Wing Puah) 花10分钟即可开始使用车把 (Take 10 minutes to get started with Handlebars) Nowadays front-end development is no longer about building static HTML markup and compiling SASS files. The rise of Single Page App…
每天一个linux命令（33）：df 命令
linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少空间，目前还剩下多少空间等信息。 1．命令格式： df [选项] [文件] 2．命令功能： 显示指定磁盘文件的可用…
一：HDFS 用户指导
1.hdfs的牛逼特性 Hadoop, including HDFS, is well suited for distributed storage and distributed processing using commodity hardware. It is fault tolerant, scalable, and extremely simple to expand. MapReduce, well known for its simplicity and applicability …