-
Notifications
You must be signed in to change notification settings - Fork 3
/
detail.html
33 lines (33 loc) · 2.41 KB
/
detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>《Bad Apple》JavaScript版</h1>
<div>
<dl>
<dt>数据来源</dt>
<dd>Yout*be上下载的480*360视频,用kmplayer输出所有单帧。</dd>
<dt>预处理</dt>
<dd>用C#写个程序,按照如下步骤处理图片,生成需要的js文件。</dd>
<dd>把256色灰度图规范化到64色(为了方便,还省空间,对效果影响不大),这样1个字符可以表示1个像素点,这时候的“视频”是个字符串。</dd>
<dd>用LZW算法把字符串压缩,结果是二进制,用可见字符表示二进制。</dd>
<dd>BASE64可以,但是体积浪费比较多,这里用了一种使用了多达91个可见字符来表示二进制的方法。</dd>
<dd>91*91=8281>8192也就是2<sup>13</sup>,所以可以用两个字符表示13位,而BASE64只能表示12位。</dd>
<dd>然后再加上一点基本的信息,比如视频的宽高,为了方便这些数据都直接被赋值到window上了。</dd>
<dt>播放</dt>
<dd>播放用canvas,Context2D提供getImageData和putImageData方法,这是个字节数组,可以直接按照RGBA访问当前帧,速度飞快。</dd>
<dd>由于“视频”文件很大(38MB),又不想一开网页就卡死在这,所以用了个动态加载script标签(文件太大,这也是治标不治本)。</dd>
<dd>解压,先用那个“BASE91”逆向出“二进制”--其实就是字节数组,然后照常用LZW解压。</dd>
<dd>因为不是整字节压缩,而是13位一组,而且压缩算法本身就是要按pattern来压缩的,pattern长度不以,所以每次解压解出多少东西是不定的,于是乎每解压出足够一帧的数据,就把多余的作为下一帧的开始。</dd>
<dd>每解压一帧就播放一帧,播放的时候要定时,并且速度不够的时候要能跳帧。</dd>
<dd>这里的跳帧比较残酷,因为是即时解压的,所以即使跳帧也必须继续解压,只是不画画而已。</dd>
<dt>其他</dt>
<dd>IE9下看不到audio的控制条,不过声音倒是真的有</dd>
<dd>最早是用span做像素点的,只能播放120*90分辨率,性能惨不忍睹,无视吧。</dd>
</dl>
</div>
<p><a href="badapple.html">back</a></p>
</body>
</html>