这是一个创建于 2791 天前的主题,其中的信息可能已经有所发展或是发生改变。
第一次发贴,好激动-。-
前言
- 几年前,同事分享提到,苹果的加载内容里面,有很多碎片拼成的图形,当时就感觉苹果就是牛逼,现在才想明白,+_+
- 很奇怪,这么好玩的技术,我 google 了好几天,也没找到,所以只有自己搞了
苹果效果图
我的效果图
先介绍下好处
- 通过图片,模仿视频的播放,可以更加精准的控制视频的前进,或者倒退,解决现有各种浏览器下的兼容问题
- 本来希望,换为图片之后,可以加载尺寸变小一些,实际反而增大了,想想也对,视频本来就是压缩后的,你换为图片,相当于增大了
- 不过增大的尺寸,是可以接受的
前提是视频的尺寸,长宽必须是 8 的倍数
方案解决流程
环境制作
详细分析如下
- PS 查看苹果碎片图,发现最小的单元格为 8 x 8 px.
- 还原网站压缩代码,发现帧数的总数,为 199 或者 249 ,加上开始的一个完整图片,总共为 200 或者 250 ,所以应该是 1 秒为 25 帧的播放
- 最难的还是关于图片对比的解决方案,因为要尽可能的压缩数据,把冗余数据,重复数据去除。
- 1.要符合实际速度,不能对比太慢。因为一个视频图片 1400*1080 , 8 像素的单元格就有 175 * 135=23625 个, 5 秒的视频有 120 张左右图片, 200 多万的单元需要处理
- 2.还要对比出,具体哪个单元格是重复,可以合并,那些是不同的。网上的图片对比,大多都是,图片的相似度百分比,根本不能找到像素级的结果
- 最终采用了, canvas 的绘图,吸色。可以完美解决,图片像素级的对比,又能保证速度。
3 条回复 • 2016-11-07 03:54:26 +08:00
|
|
1
sparanoid 2016-11-04 15:00:58 +08:00
感谢分享,之前 Mac Pro 那个页面刚出的时候,做过一个类似的,那时候 Apple 是直接用视频配合 HTMLMediaElement API 来调整视频的播放,设备不兼容的话好像就直接是一张图片了
|
|
|
2
fishcat 2016-11-04 16:22:30 +08:00
感谢楼主分享,学习一下
|
|
|
3
wsph123 2016-11-07 03:54:26 +08:00 via iPhone
这个厉害 mark 下
|