这是一个创建于 2941 天前的主题，其中的信息可能已经有所发展或是发生改变。
第一次发贴，好激动-。-
前言
- 几年前，同事分享提到，苹果的加载内容里面，有很多碎片拼成的图形，当时就感觉苹果就是牛逼，现在才想明白，+_+
- 很奇怪，这么好玩的技术，我 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 的绘图，吸色。可以完美解决，图片像素级的对比，又能保证速度。
 |
1
sparanoid MOD 感谢分享，之前 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 下
|
Select Language