字体平滑➕视频转canvas

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