1.简要说明
汪峰fiil耳机的一个H5品牌推广项目，记住是fiil而不fill哦
简单型H5
2.设计图-字体部分
Paste_Image.png
不知道怎么 截图不太清晰 实际看是没有毛边的 很精致
记录的点
- 字体平滑
- 视频转canvas
3.字体平滑
-webkit-font-smoothing: antialiased;
虽然在标准中已经将-webkit-font-smoothing删去了 但是在部分机型上依然可用 至于其它不支持的呢?
能默认就默认
不能默认优选字体来做
尽量不要借助这些css字体效果
使用平滑
Paste_Image.png
不使用平滑
Paste_Image.png
4.视频背景
- 首屏背景为一个自动循环播放的视频
- 点击播放2分钟视频且全屏播放 带有关闭按钮
- 第三屏有一小块小视频 长度在15秒左右
最开始首屏视频是3套动作循环的长度在30秒左右，我也不明白为啥要一套动作打三遍……那个视频很适合做背景的，后来换成一个大黑三角的了 就3秒……
原来的 是不是很适合
Paste_Image.png
瞅瞅现在的……
Paste_Image.png
第三屏的小视频
Paste_Image.png
4.1 为什么要转canvas
安卓不能自动播放……
<!--无效-->
<video id='video' auto=true>
//失效
setTimeout(function playVideo(){
document.getElementById('video').play()
},0)
在水果上效果好的一逼,那咋整,要么gif图,要么canvas
- gif 图在当时首屏没换素材的时候转完 10m+ (客户要保住效果) 且播放会让手机发热严重
- canvas 素材1m以内
遂,选了canvas
视频转为帧图
视频转换为单帧
借用ffmpeg工具 mac用户可以通过homebrew安装(忘了是不是这么些安装命令了)
brew install ffmpeg
安装完成之后就可以切到转换目录去做转换了
ffmpeg -i 视频.mp4 -vf scale=375:-1 -r 5 frames/%04d.png
-r 5 的意思是以多少帧播放为尺度划分 越大 单帧越多 最后合并肯定也是越大 慢慢调整到合适
转换完为:
Paste_Image.png
单帧拼合为大图便于绘制
需要ImageMagick工具
同样的可以通过homebrew安装
brew install ImageMagick
安装完之后进行单帧合并
montage -border 0 -geometry 375x -tile 6x -quality 60% frames/*.png 要输出的文件名.jpg
参数说明:
- -border 就是不加边框
- -quality 合并压缩质量
- frames/*.png 这个为你的单帧图片所在目录
合并完
Paste_Image.png
canvas绘制
当然你可以自己写一段canvas绘制的(那个单独再开一篇写)
也可以用现成的……比如
canvid.js
使用代码
<div id="canvid-bk-video"></div>
frames:划分了多少张单帧就写多少
宽高可以通过css样式来定的 这里填写默认的就好 适配没问题
var canvidControl = canvid({
selector : '#canvid-bk-video',
videos: {
zlxvideo: {
src: 'static/fill/myvideo2.jpg', frames: 47, cols: 6
}
},
width: "750",
height:"1203",
loaded: function() {
canvidControl.play('zlxvideo',false,15);//15帧速度播放
}
});
附 一些机型的文字效果
红米2 prime
Paste_Image.png
小米4
Paste_Image.png
荣耀 这个图片拉伸另有引擎
魅蓝note2
Paste_Image.png
华为荣耀6plus
Paste_Image.png
华为p9
Paste_Image.png
先放一点图吧 太多…… 实际是要测原生、微信、uc、qq
