在mac开发一个脚本执行FFMpeg编译
项目中采用JSMpeg方案播放视频，需要用到FFMpeg转码。调研了市面上FFMpeg封装的应用，要么收费，要么配置不够，为了方便产品运营（避免以后转换视频的工作都落到自己头上），研究了下用bash写了个脚本，又用mac的command双击执行。 1. FFMpeg命令安装FFMpeg，配置环境变量。打开终端，执行FFMpeg命令编译视频。（这里我配置的环境变量可能有点问题，又在视频目录放了一份ffmpeg文件。） JSMpeg所需要的命令如下： 1ffmpeg -y -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts 其中-i是指定输入文件，最后面是输出文件。-f mpegts -codec:v mpeg1video -codec:a mp2这个是JSMpeg指定的编码、视频、音频格式。-y是当输出文件已存在同名文件时，不要询问直接覆盖。此外，可以加参数指定分辨率，截取时长等。 如下面的b:v指定了码率，scale指定了分辨率。 1ffmpeg -i in.mp4 -f mpegts -codec:v mp...
h5播放视频
一个在h5页面播放视频的需求。最先采用了video标签的方案，后改为使用JSMpeg。 video标签方案使用html原生的video标签播放。 video标签文档：https://www.runoob.com/tags/tag-video.html 使用如下： 1234567891011121314151617<template> <video id="video" ref="myVideo" preload="auto" :controls="config.controls" :poster="config.poster" :autoplay="config.autoplay" :muted="config.muted" :loop="config.loop" x-webkit-airplay="allow" w...
开发一个网页版节拍器
平时练尤克里里经常用到节拍器，突发奇想自己用js开发一个。 最后实现的效果如下：https://ahao430.github.io/metronome/。 代码见github仓库：https://github.com/ahao430/metronome。 1. 需求分析节拍器主要是可以设定不同的速度和节奏打拍子。看各种节拍器，有简单的，也有复杂的。 设定不同的速度，每分钟多少拍 选择节拍，比如4/4拍、3/4拍、6/8拍等等。 选择节拍的节奏型，一拍一个，一拍两个，一拍三个（三连音），一拍四个，swing，等等。这个很多简易节拍器就没有了。 切换不同的音色，比如敲击声、鼓声、人声等等。 这里拍速是指一分钟有多少拍。 而节拍是以几分音符为1拍，每小节几拍。这个不影响拍速，观察各种节拍器，这里会展示几个小点，每一拍一个点，其中第一拍第一下重声，后面的轻声。 节奏型决定每一拍响几下，以及这几下之前的节奏。比如这一拍响一下、响两下、响三下、响四下；如果是一个swing就是前8后16分音符的时长；也可能这个节奏型的时长是两拍，比如民谣扫弦的下—-，下...
利用阿里oss处理图片
oss图片处理能力我们平时存储图片一般都是用的阿里oss服务，阿里oss除了存储文件外，还有很多其他功能。比如可以通过拼接url后缀，来对图片进行处理。 官方文档在这里：https://help.aliyun.com/document_detail/144582.html。 可以看到，支持很多处理方式，如修改图片的分辨率，给图片添加水印，转换图片格式，压缩图片等等。 下面简单介绍下拼接的规则： 必须是上传到oss的图片链接 后面拼接参数?x-oss-process=image，再继续按照不同的功能拼接 类似旋转、亮度这种，参数说明只有一个[value]的，直接/[key],[val]。如https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/rotate,90 如果参数说明是一个对象，对象又有很多子key，拼接方式是/[key],[subKey1][subVal1],[subKey2...
github自动部署分支到pages
在代码根目录新建.github/workflows/目录，新建一个任意名称后缀yml的文件。 内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566name: CIon: push: branches: - main # 这里是要自动部署的分支名，有提交的时候就会触发actionjobs: job: name: Deployment runs-on: macos-latest permissions: pages: write id-token: write environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Checkout ...
Svga和lottie动画在h5的使用
需求需要在h5页面中做复杂动效，调研了几种常用的方案，跟UI一起尝试。 调研占用内存对比：从大到小： 视频＞序列帧＞GIF＞APNG/WEBP＞LOTTIE/SVGA 质量稳定对比：从差到好： 视频＜GIF＜序列帧＜APNG/WEBP＜LOTTIE/SVGA 支持AE动效对比：从多到少：视频＞GIF＞序列帧＞APNG/WEBP＞LOTTIE/SVGA 业务方案： gif虽然体积小、兼容性好、但效果差、不推荐使用、除非非常在意多端兼容性与性能！ 简单的动图采用webp、比如简单的聊天表情动图（骰子、石头剪刀布等） lottie适合一些复杂的动画、比如复杂的加载动画、引导动画等、不适合做直播间大礼物特效 直播间复杂的大礼物动可以用效用svga,webp还有apng MP4不建议做直播间礼物动画防范 这里我们的需求是需要较复杂的动效，并且希望可配置，一键替换动效文件，svga和lottie比较符合我们的需求。gif图文件太大，并且不好精细操作；而序列帧也是一样的问题，并且不适合做配置替换。 另外调研阶段发现腾讯出...
React拖拽效果实现
原生js中，我们可以通过onDrag和onDrop事件来实现拖拽效果。而在react中，有一个强大的库，react-dnd，对拖拽相关能力进行了封装。react-dnd强大的好处是高度自由性，但是各种代码需要去手动实现。 我们海星二期装修页面需要实现一个拖拽（排序和复制），这里我们选择一个基于react-dnd二次封装的库，react-smooth-dnd。 文档安装1npm i react-smooth-dnd 示例1234567891011121314151617181920import React, { Component } from 'react';import { Container, Draggable } from 'react-smooth-dnd';class SimpleSortableList extends Component { render() { return ( <div> <Container...
遍历项目打包代码部署
原项目是在webpack里配置entry为列表，遍历多个活动页面打包。现改造项目拆分为独立的项目，又想能够在需要时遍历所有项目打包，所以在根目录加了一个build命令，并写了一个脚本去执行。 命令：1234567891011121314{ "name": "@mono/dsp", "version": "0.1.0", "private": true, "type": "module", "scripts": { "build": "npm run build:prod", "build:dev": "cross-env NODE_ENV=production VUE_APP_ENV=dev node build/index.mjs", "build:test": "...
在vue中开发一个命令式调用的弹窗组件
活动需求要做一个顶部弹窗图片的toast效果，想起element中通过命令调用toast组件的方式，去调研一番，实现了一个类似效果。 相关api：核心需要用到两个api： Vue.extend方法，通过模板创建Vue构造器：https://cn.vuejs.org/v2/api/?#Vue-extend vm.$mount方法，获取vm实例：https://cn.vuejs.org/v2/api/?#vm-mount 第一步，创建模板如下，写一个Vue组件，就像我们平常手动引入使用的组件那样。但是不用写props，所有的配置对象写到data里。关闭的时候，要销毁dom对象。我们知道vm.$el可以拿到组件的dom元素，因此可以通过this.$el.parentNode.removeChild(this.$el)来移除dom。在此之前，用vm.$destroy销毁vm实例。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556...
在less中使用循环和js随机生成样式
最近做一个果树活动，其中有一段金币红包下落的动画是用css写的。批量生成了多个金币和红包元素，起始位置随机。 但是如果手动写一大堆样式代码就太不方便了，记得less可以写循环，又搜了一下less可以用js生成随机变量。于是实现如下： 批量生成红包和元素123456789101112131415161718<div class="tree-box"> <img :class="['tree-head', { shake: treeShake }]" src="@/assets/imgtree-head.png" /> <img class="tree-body" src="@/assets/img/tree-body.png" /> <div :class="['coins', { up: coinUp, down: c...