- 博客(12)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 史上最强前端视频剪辑工具来了！
选中元素并让游标在元素区间内，点击关键帧按钮可以给元素当前的状态（位置、大小、旋转角度、透明度、遮罩样式）添加一个关键帧，将游标移动到其他位置，重新设置元素的样式可以自动添加一个新的关键帧，两个状态会自动添加渐补动画。元素的前面和后面都可以进行拖动，拖动前面表示对视频的前半段进行裁剪，拖动后面的按钮表示对视频的后半段进行裁剪，因为视频的时长是固定的，所以视频的裁剪长度是有限制的，其他元素没有长度限制。字幕元素区别于文字元素，字幕元素的样式是统一的，修改一个字幕元素的样式，全部字幕样式都会被修改。
2024-02-28 15:10:26
1059
1
原创 web端在线视频剪辑工具技术分析
而抽取的base64帧图是无法直接使用的，我们还需要实时计算和绘制出帧图。4、视频合成问题：视频的合成我们之前有调研过视频webRTC录屏的方式，但是这样有很多缺陷，比如视频是否流畅取决于用户电脑的配置，另外视频的清晰度也受用户的屏幕分辨率的限制，每次合成的结果都不一样，这样就没法商用了，而且帧率没法固定，所以我们果断放弃录屏的方案，采用截图编码成视频帧数据（使用的web原生接口：VideoEncoder，VideoFrame），然后合成MP4，这样就可以确保能得到高质量的视频，也不会出现掉帧的情况。
2024-01-05 12:46:08
1087
1
原创 720全景/360全景工具开发总结
类似地球仪一样，这个做法是最简单的，但是这种做法有很大的缺陷，如果贴图太大，移动端浏览器打开会直接崩溃，没法支持高清图片，PC端的性能也会非常差，图片太大的情况下GPU性能消耗会非常高。所以threejs官方也没推荐使用这个方法。
2023-12-19 16:16:27
830
1
原创 基于threejs(webgl)的3D元宇宙云展厅
首先看看效果图： 基于 threejs 开发的 3D 展厅，展品可以自由摆放。支持 gltf/glb 格式在线演示：在线演示地址加载厅模型加载其他模型和动画加载展品数据导览开启和关闭重力感应
2023-02-25 10:42:12
2446
5
原创 threejs 720/360全景工具开发心得
前言最近做了一个720全景工具，有很多开发人员觉得全景图很简单，github上也有很多全景图的源码，但当实际使用的时候会发现有很多坑，还达不到真正意义上的商用级别，下面我会把我们开发这个项目遇到的一些坑和解决方案都梳理处理，已经发布到线上https://720.h5ds.com/工具简介：H5-720全景（简称H5-720）是一款基于threejs + h5的全景图制作工具，用户可上传全景图片制作全景图，H5-720可以预设按钮，添加元素，添加热点，添加特效，添加多种交互方式，一键开启重力感应，VR眼
2022-05-19 15:32:52
2280
1
原创 你TM管这着玩意儿叫H5编辑器？？？？？
作为一名程序员，产品经理、设计师等身兼数职的我，推荐一款年度最佳的H5编辑器给大家，真心牛逼，业界良心，看的我热血沸腾，回家一脚踢飞正在熟睡的哈士奇！H5DS编辑器，软件截图：推荐理由1：时间轴支持动画时间轴，调试动画和音频给图层添加动画后可以通过时间轴设置动画，真的很直观和方便。效率提升N倍。其中紫色块表示进入动画，蓝色是离开动画，黄色块是强调动画，绿色块表示音频，另外时间轴开可以设置音乐播放的开始时间。推荐理由2：批量操作批量选中后，还可以一键布局，批量粘贴动画，批量设置动画间隔，真是强
2020-08-07 13:39:41
298
原创 H5DS编辑器之时间轴实现原理
在做H5DS编辑器的时候，我遇到一个需求：通过时间轴的游标控制动画的进度。看下效果图：技术选型：视图：react动画: 这里我们采用CSS3动画库https://animate.style/好了，就这些了！实现原理添加动画的时候，动态的给style添加动画属性：<div style={{animation: `2s ease 0s 1 normal forwards paused bounceIn`}}> 五星SVG</div>上面代码.
2020-07-15 19:58:11
690
原创 推荐一款制作H5页面的可视化工具
推荐一款制作H5页面的可视化工具无需写代码，可视化H5页面制作编辑器。使用JS写的，直接谷歌浏览器打开即可使用。无需写代码，可视化H5页面制作编辑器。使用JS写的，直接谷歌浏览器打开即可使用。下面是截图：代码另存为HTML文件即可打开：<!DOCTYPE html><html lang="en"> <head> <meta char...
2019-09-17 16:25:06
9273
3
原创 空手套白狼-我的互联网草根创业亲身经历
和大多数人一样，我出生寒门学子，没钱没势，所有的一切都是从零开始，只能空手套白狼，本文章主要是为了分享下我个人的创业经历以及一个产品从无到有的过程，后面也会聊到我做H5工具的相关技术方案，希望能帮助读者在未来的工作或者是创业路上有所帮助。2010年第一次创业务实的人都不甘于平庸，我亦如此，也许越是有挑战的东西，我越是感兴趣，创业的想法就像一颗毒瘤一直在我脑中去不掉，大学第一天上学，...
2019-09-10 16:45:06
592
转载 推荐1个易上手代码开源的好用的H5网页编辑工具
项目简介H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。 H5DS 官方 Git (https://github.com/h5ds/h5ds) ，简体中文 UTF8 版本，其他版本请自行转码 h5ds 官方站：http://www.h5ds.com相关网站 h5ds 官方站：http:/...
2019-02-20 17:26:59
10468
原创 threejs（webgl）实战演练-董涛-专题视频课程
针对webgl的库threejs框架的一些实战项目详细的讲解，带大家一起学习和制作出超级酷炫的3D页面效果
2017-12-07 13:08:49
680
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人