animate

Java Web 中使用ffmpeg实现视频转码、视频截图

由 蹲街弑〆低调 提交于 2021-02-11 15:26:28
Java Web 中使用ffmpeg实现视频转码、视频截图 转载自:[ http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html ] 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能、视频格式转换、视频抓图、给视频加水印等。 ffmpeg视频采集功能非常强大，不仅可以采集视频采集卡或USB摄像头的图像，还可以进行屏幕录制，同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器，支持直播应用。 1.能支持的格式 ffmpeg能解析的格式：（asx，asf，mpg，wmv，3gp，mp4，mov，avi，flv等） 2.不能支持的格式 对ffmpeg无法解析的文件格式(wmv9，rm，rmvb等),可以先用别的工具（mencoder）转换为avi(ffmpeg能解析的)格式. 实例是将上传视频转码为flv格式,该格式ffmpeg支持,所以我们实例中需要ffmpeg视频处理工具. 数据库 MySQL5.5 实例所需要的数据库脚本 drop database if exists db_mediaplayer; create

重绘和回流

由 喜欢而已 提交于 2021-02-11 01:25:19
页面呈现流程 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。 dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。 3、dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render

Flutter实现3D效果，一个字，炫！

由 淺唱寂寞╮ 提交于 2021-02-09 03:42:38
点击上方 " 程序员小乐 "关注, 星标或置顶一起成长 后台回复“ 大礼包 ”有惊喜礼包！ 关注订阅号「 程序员小乐 」，收看更多精彩内容 每日英文 It doesn't matter what others think of you ,What matters most is How you see yourself. 不要太在意别人如何看待你；最 为重要的是你如何看待你自己。 每日掏心话 世间没有不被评说的事，也没有不被猜测的人；依心而行，做真实漂亮的自己。生命是倒计时的；日子是顺着过的；人生是说不清的；命运是猜不透的；辉煌总会来的；霉头总会有的；命是必须信的。 来 自 ： 老孟Flutter | 责编：乐乐 链接：live.bilibili.com/21917305 后端架构师(ID:study_tech) 第 1084 次推文 往日回顾： 再见！Postman 正文 Flutter 中3D效果是通过Transform组件实现的，没有变换效果的实现： class TransformDemo extends StatelessWidget { @override Widget build (BuildContext context) { return Scaffold( appBar: AppBar( title: Text( '3D 变换Demo' ), ), body:

基于three.js实现特定Div容器的粒子特效封装

由 帅比萌擦擦* 提交于 2021-02-04 04:24:43
　　　 本文基于three.js实现特定容器的粒子特效效果，支持用户传入特定的dom对象以及粒子颜色。 　　 　　效果图 　　移入库 < script src ="jquery-1.11.3.min.js" type ="text/javascript" > </ script > < script src ="three.min.js" type ="text/javascript" ></ script > < script src ="bodong.js" type ="text/javascript" ></ script > 　 　　Html页面指定容器 <!-- 波动动画 --> < div id ="particles" style ="width:100%; overflow:hidden; height:200px;background:#383232;" ></ div > 　　创建波动示例并完成容器绑定 < srcipt > $(function(){ //构造波动对象，指定dom元素，指定粒子颜色字符串 var BodongObj=new Bodong($('#particles'),'#c0cbff'); BodongObj.init(); BodongObj.animate(); }) </ script > 　　第三方库下载链接 　　http://v

ThreeJS实现波纹粒子效果

由 核能气质少年 提交于 2021-02-04 03:46:07
　　今天我们来用ThreeJS的库实现一个波纹粒子效果，我们用到的ThreeJS的库有CanvasRenderer.js，OrbitControls.js，Projector.js，stats.min.js和three.js。这些库都是不可或缺的，我们先来看看实现的效果，如下图所示。 　　我们再来看看项目结构是怎么样的，项目结构如下图所示。 我们的效果全部写在了index.html里，现在我们直接贴出index.html的代码，同学们可以直接拿来运行，代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示页面</title> <script src="three.js"></script> <script src="Projector.js"></script> <script src="CanvasRenderer.js"></script> <script src="stats.min.js"></script> <script src="OrbitControls.js"></script> </head> <body> </body> <script> var SEPARATION = 200 , AMOUNTX = 60 , AMOUNTY = 60 ; var

顶级在线设计工具收藏

由 二次信任 提交于 2021-01-29 08:58:54
顶级在线设计工具收藏 疯狂的技术宅 前端先锋 介绍 这是一些精心挑选的在线工具，这些工具都经过了测试，我发现它们非常有用，并与大家分享。 背景 1. SVG BACKGROUNDS 与PNG、JPG 或 GIF一样，SVG 图像也可以用作 CSS 中的背景图像。这是一种很酷的方法，因为我们可以将主要元素本身与纯色背景颜色匹配，并使页面背景渗入 SVG 内部的负空间。 网址： https://www.svgbackgrounds.com/ 2. FREEPIK BACKGROUND COLLECTION 可以检索并下载大量免费的 SVG 背景资源。 ✓免费供商业用途 ✓高质量图像。 网址： https://www.freepik.com/free-photos-vectors/svg-background 3. HERO PATTERNS 一组可供你平铺的 SVG 背景图案，供你在 Web 项目中使用。 网址： https://www.heropatterns.com/ 4. FLATICONS 可以通过简单的步骤创建精美的设计。 搜索图标，选择你的收藏夹并将其放在工作区中 你可以更改大小，颜色和背景。 以你喜欢的格式和大小下载设计。 网址： https://www.flaticon.com/pattern/ 5. LOADING.IO PATTERNS 这是个很棒的工具

jquery 简单归纳 -- 前端知识

由 蹲街弑〆低调 提交于 2021-01-24 02:48:06
jquery 什么是jQuery？ jquery是轻量级的JavaScript库，核心是javascript，兼容css和各种浏览器，核心理念是写得少做得多（write less do more）。 为什么要学习jQuery? 因为它有很多优势：容易上手，强大的选择器，节约开发时间，丰富的UI，完善的事件机制，Ajax的封装。 此外，补充jQuery的一些特性和方法：链式操作，回调函数，迭代器，延迟对象，队列。 带min与不带min两个版本的区别： a. jquery-1.11.3.js --- 开发版:编写代码的时候可能会出现一些问题,去看源码的设计思路,让自己的问题得到解决, 切记 :只是参考,看看就够了,千万不要修改。 b. jquery-1.11.3.min.js --- 生产版:当我们的编码全部完成,测试通过,要上线,此时,换成该版本。 内容和功能全都是相同的，只是文件大小的问题,带min的是经过压缩以后的,去掉了所有的空格和换行,主要是减小占用的空间,形参进行了更改,通过工具进行的压缩。 jQuery版本 1.x.x 兼容性最好的 2.x.x 抛弃了IE9以下 3.x.x 浓缩的2.0的版本 jQuery属于说是企业的标准了 jquery的插件非常多,很多的动画都是依赖于jquery完成的 jquery库下载网站 --- http://www.jq22.com (免费的

前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity

由 这一生的挚爱 提交于 2021-01-09 17:05:58
一、 媒体 ( 介 ) 查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有： width 、 height 和 color （等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。 使用 @media 查询，你可以针对不同的 媒体类型 ( 媒体、媒介 ) 定义不同的样式。 @media 可以针对不同的 屏幕尺寸 设置不同的样式，特别是如果你需要设置设计响应式的页面， @media 是非常有用的。 基本语法： @media 约束词 媒体类型 修饰词 宽高限制 {css 代码 } @media 媒体类型 and|not|only (媒介约束条件) { CSS-Code; } 咱们页面渲染的 媒介 指的就是：电脑、手机、平板、手表、打印机 ··· 1.2 查询条件 max-width:999px; 最大宽度（当设备小于或等于 999px 时执行） min-width:999px; 最小宽度（当设备大于或等于 999px 时执行） @media ( 条件 1) and ( 条件 2){ 条件 1 和条件成立执行的 CSS 样式 } /* 当屏幕尺寸大于或等于1000px，并且 小于或等于1199px */ @media (min-width: 1000px) and (max-width:

vue Toast 弹窗

由 笑着哭i 提交于 2020-12-19 06:27:15
创建一个message.vue组件 <template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <i :class="iconState ?'success':'wrong'"></i> {{text}} </div> </template> <style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.6); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; font-size: 0.1rem; text-align: center; } .fadein { animation: animate_in 0.5s; } .fadeout { animation: animate_out 0.5s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{

前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器

由 非 Y 不嫁゛ 提交于 2020-12-18 02:01:07
一、 jQuery 简介 1.0 JavaScript 编程比较恶心的地方 恶心 1 ：选择元素麻烦，全线兼容的方法只有 getElementById() 和 getElementsByTagName() 两个。其他的方法是不都兼容的。 getElementsByClassName() 通过类名选择元素， IE9 开始兼容。 恶心 2 ：样式操作麻烦，得到原生样式，需要我们自己造轮子 getStyle() 恶心 3 ：动画麻烦，需要我们自己造轮子 animate(); 恶心 4 ：批量控制麻烦，大量出现的 for 循环语句；排他操作麻烦 恶心 5 ： HTML 节点操作麻烦 恶心的东西，能用 “轮子”来解决，事实上我们已经造了两个轮子： getStyle 、 animate 。 能不能把所有轮子组合起来，成为一个框架呢？ jQuery 就是这样的一个东西。 1.1 简介 jQuery 是 DOM 编程领域的霸主，极大的简化了原生 JavaScript 的 DOM 编程。是免费开源的、语法设计简单，可以更便捷开发，例如选择元素、制作动画效果等功能。 jQuery 中含有丰富的轮子，完美解决了选择元素难、样式难、动画难、批量操作难等各种兼容问题， 让工程师只需要思考业务，而不必思考细枝末节的兼容问题 。jQuery 是一个 js 文件，兼容多浏览器的 JavaScript 库（框架）。
订阅 animate