研究苹果视频加载方案，小结

[daben1990]

第一次发贴，好激动-。-

前言

• 几年前，同事分享提到，苹果的加载内容里面，有很多碎片拼成的图形，当时就感觉苹果就是牛逼，现在才想明白，+_+
• 很奇怪，这么好玩的技术，我 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 的绘图，吸色。可以完美解决，图片像素级的对比，又能保证速度。

[sparanoid]

感谢分享，之前 Mac Pro 那个页面刚出的时候，做过一个类似的，那时候 Apple 是直接用视频配合 HTMLMediaElement API 来调整视频的播放，设备不兼容的话好像就直接是一张图片了

[fishcat]

感谢楼主分享，学习一下

[wsph123]

这个厉害 mark 下