webp真的好吗？（上）

我原本是不想要起这么一个标题党的标题。但是很不幸，我的实验结果是：webp在一些情况下并不好，甚至不如JPEG

事情的起因是这样的：某位自称拥有钛合金狗眼的同学表示他看webp觉得颜色过度特别僵硬，觉得webp会丢失颜色。我凭借着很多年与天斗与地斗与人斗的经验表示，这不可能，因为webp的变换和JPEG的变换基本没有差别，都是先转换颜色空间，然后离散余弦变换变换到频域，之后编码。由于WebP使用了压缩编码器，所以WebP的结果应该更好。于是我就随手写了这些脚本

run.sh

rm -rf out
mkdir out
cp src.tiff out/
./towebp.sh
./tojpg.sh
./tobmp.sh
rm -f out/src.tiff
convert src.tiff src.png
cwebp src.tiff -lossless -alpha_cleanup -o src.webp

rm -rf out

mkdir out

cp src.tiff out/

./towebp.sh

./tojpg.sh

./tobmp.sh

rm -f out/src.tiff

convert src.tiff src.png

cwebp src.tiff -lossless -alpha_cleanup -o src.webp

tojpg.sh

cd out
for((i=0;i<101;i++));
do
convert -quality $i src.tiff out_$i.jpg > /dev/null & 
done
wait
cd ..

cd out

for((i=0;i<101;i++));

convert -quality $i src.tiff out_$i.jpg > /dev/null &

done

wait

cd ..

towebp.sh

cd out
for((i=0;i<101;i++));
do
    cwebp -q $i src.tiff -o out_$i.webp >/dev/null &
done
wait
cd ..

cd out

for((i=0;i<101;i++));

cwebp -q $i src.tiff -o out_$i.webp >/dev/null &

done

wait

cd ..

因为我要统计信噪比所以我需要吧webp格式再转换成无损的格式，我就选择了bmp格式

find ./out -name "out_*.webp"| parallel  convert {} {}.bmp > /dev/null

1	find ./out -name "out_*.webp"\| parallel convert {} {}.bmp > /dev/null

下面就来正文了，我们要统计信息的信噪比了。于是我写了一段简单的MATLAB脚本

src = imread('src.tiff');
src = src(:,:,1:3);

size_jpg = zeros(1,101);
size_webp = zeros(1,101);

snr_jpg = zeros(1,101);
snr_webp = zeros(1,101);

for i=1:100
    path_jpg = ['./out/out_' num2str(i) '.jpg'];
    path_webp = ['./out/out_' num2str(i) '.webp.bmp'];
    path_webp_src = ['./out/out_' num2str(i) '.webp'];
    
    jpg = imread(path_jpg);
    webp = imread(path_webp);
    
    info_jpg = dir(path_jpg);
    info_webp = dir(path_webp_src);
    
    size_jpg(i+1) = info_jpg.bytes;
    size_webp(i+1) = info_webp.bytes;
    
    snr_jpg(i+1) = psnr(jpg,src);
    snr_webp(i+1) = psnr(webp,src);
end

%% figure

figure;
hold on;
title('Size(byte)-SNR');
plot(size_jpg,snr_jpg);
plot(size_webp,snr_webp);
legend('jpg','webp');
grid on;
hold off;

figure;
hold on;
title('Compress Level(%)-SNR');
plot(snr_jpg(2:end));
plot(snr_webp(2:end));
legend('jpg','webp');
grid on;
hold off;

src = imread('src.tiff');

src = src(:,:,1:3);

size_jpg = zeros(1,101);

size_webp = zeros(1,101);

snr_jpg = zeros(1,101);

snr_webp = zeros(1,101);

for i=1:100

path_jpg = ['./out/out_' num2str(i) '.jpg'];

path_webp = ['./out/out_' num2str(i) '.webp.bmp'];

path_webp_src = ['./out/out_' num2str(i) '.webp'];

jpg = imread(path_jpg);

webp = imread(path_webp);

info_jpg = dir(path_jpg);

info_webp = dir(path_webp_src);

size_jpg(i+1) = info_jpg.bytes;

size_webp(i+1) = info_webp.bytes;

snr_jpg(i+1) = psnr(jpg,src);

snr_webp(i+1) = psnr(webp,src);

end

%% figure

figure;

hold on;

title('Size(byte)-SNR');

plot(size_jpg,snr_jpg);

plot(size_webp,snr_webp);

legend('jpg','webp');

grid on;

hold off;

figure;

hold on;

title('Compress Level(%)-SNR');

plot(snr_jpg(2:end));

plot(snr_webp(2:end));

legend('jpg','webp');

grid on;

hold off;

嗯，代码都放到这里了，只要准备一张测试用的tiff格式的图片就可以开始测试了。由于进行了大量的转码，这个测试相当的耗费硬盘CPU。这里做了比较多的并行优化，笔记本的话还是别跑了。

今天已经很晚了，测试结果明天更新，到时候就会知道为什么有的时候WebP不如JPEG了

2015年2月2日

flex播放视频

消失了好久，一直在做数学建模比赛，终于抽出一些时间来了。来更新一下。大概下一段时间我应该能放出不少源代码吧（其实我是一直懒得上传Github……

现在U2B已经正式使用html5的视频播放器作为默认视频播放器，不过由于各种原因国内的视频源绝大多数视频都是flv作为容器的，没有办法被html5的video标签播放，最近的弹幕播放的项目逼得我去学习那过时的flex技术。什么都不说了，上代码好了。flex4不支持。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="init();">
	<mx:Style source="main.css"/>
	
	
	<mx:VideoDisplay id="videoDisplay" width="100%" height="100%" autoPlay="false" autoRewind="false"
					 close="doVideoEvent(event);" complete="doVideoEvent(event);"
					 playheadUpdate="doVideoEvent(event);" progress="doProgressEvent(event);"
					 ready="doVideoEvent(event);" rewind="doVideoEvent(event);" source="{FLV_URL}"/>
	
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.CuePointEvent;
			import mx.events.VideoEvent;
			
			[Bindable]
			private var arrColl:ArrayCollection;
			
			[Bindable]
			private var FLV_URL:String ;
			
			private var CALLBACK_FUNC:String;
			
			/**
			 * Initialize the ArrayCollection object.
			 */
			private function init():void {
				arrColl = new ArrayCollection();
				FLV_URL =  "http://edge.v.iask.com.lxdns.com/56216392.hlv?KID=sina,viask&Expires=1422979200&ssig=gbTMXDw0ui";
				CALLBACK_FUNC = "jsCallback";
			} 
			
			private function doVideoEvent(evt:VideoEvent):void {
				ExternalInterface.call(CALLBACK_FUNC,evt.toString());
			} 
			
			private function doCuePointEvent(evt:CuePointEvent):void {
				ExternalInterface.call(CALLBACK_FUNC,evt.toString());
			} 
			
			private function doProgressEvent(evt:ProgressEvent):void {
				ExternalInterface.call(CALLBACK_FUNC,evt.toString());
			} 
			
			public function doJS(par1:String,par2:String):String{
				if(par1 == "URL"){
					if(par2=="")
						return FLV_URL;
					else
						return FLV_URL = par2;
				}else if(par1 == "state"){
					return videoDisplay.state;
				}else if(par1 == "volume"){
					if(par2 == "")
						return String(videoDisplay.volume);
					else
						videoDisplay.volume = Number(par2);
				}else if(par1 == "play"){
					videoDisplay.play();
				}else if(par1 == "pause"){
					videoDisplay.pause();
				}else if(par1 == "stop"){
					videoDisplay.stop();
				}else if(par1 == "callback"){
					if(par2 == "")
						return CALLBACK_FUNC;
					else
						CALLBACK_FUNC = par2;
				}
				return "";
			}
			
		]]>
	</mx:Script>
	
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="init();">

<mx:Style source="main.css"/>

<mx:VideoDisplay id="videoDisplay" width="100%" height="100%" autoPlay="false" autoRewind="false"

close="doVideoEvent(event);" complete="doVideoEvent(event);"

playheadUpdate="doVideoEvent(event);" progress="doProgressEvent(event);"

ready="doVideoEvent(event);" rewind="doVideoEvent(event);" source="{FLV_URL}"/>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.CuePointEvent;

import mx.events.VideoEvent;

[Bindable]

private var arrColl:ArrayCollection;

[Bindable]

private var FLV_URL:String ;

private var CALLBACK_FUNC:String;

/**

* Initialize the ArrayCollection object.

private function init():void {

arrColl = new ArrayCollection();

FLV_URL = "http://edge.v.iask.com.lxdns.com/56216392.hlv?KID=sina,viask&Expires=1422979200&ssig=gbTMXDw0ui";

CALLBACK_FUNC = "jsCallback";

}

private function doVideoEvent(evt:VideoEvent):void {

ExternalInterface.call(CALLBACK_FUNC,evt.toString());

}

private function doCuePointEvent(evt:CuePointEvent):void {

ExternalInterface.call(CALLBACK_FUNC,evt.toString());

}

private function doProgressEvent(evt:ProgressEvent):void {

ExternalInterface.call(CALLBACK_FUNC,evt.toString());

}

public function doJS(par1:String,par2:String):String{

if(par1 == "URL"){

if(par2=="")

return FLV_URL;

else

return FLV_URL = par2;

}else if(par1 == "state"){

return videoDisplay.state;

}else if(par1 == "volume"){

if(par2 == "")

return String(videoDisplay.volume);

else

videoDisplay.volume = Number(par2);

}else if(par1 == "play"){

videoDisplay.play();

}else if(par1 == "pause"){

videoDisplay.pause();

}else if(par1 == "stop"){

videoDisplay.stop();

}else if(par1 == "callback"){

if(par2 == "")

return CALLBACK_FUNC;

else

CALLBACK_FUNC = par2;

}

return "";

}

]]>

</mx:Script>

</mx:Application>

2014年11月29日

ABPlayer的正确编译姿势

jabbany 大牛的ABPlayer在ACG技术宅中听过的比例应该很高，这是一个基于flex的弹幕播放器，支持高级弹幕以及新浪以及土豆的解析。但是由于项目由于很久没有更新了（作者去弄它的HTML5版了），所以现在好多小伙伴表示在flex 4.6下面编译不过去，我就来说说正确的编译姿势

flex 4.6之后添加了自带的JSON支持，所以项目里面的JSON库就会和SDK自带的JSON库发生冲突。解决方法也很简单：移除掉org.kanoha.util.CommentListParser里面的JSON的import，然后更换Json的构造方法为 JSON.parse(text);

解决方案已经pull到ABPlayer项目里面。不过mini-player分支没有修改，只修改了master分支

2014年3月23日

随手搭建了一个弹幕视频播放

前两天Hazx和我说他的论坛弹幕插件有问题，就研究了一下，顺便随手搭建了一个弹幕播放系统……

http://www.261day.com/Player/

可以通过http://www.261day.com/Player/index.php?vid={新浪vid} 的方式进行调用

这些flash弹幕播放器都是用flex做的，欺负我没有flash builder

一	二	三	四	五	六	日
« 2月
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

261days

manageryzy的blog，记录每一个工作日

Category Archives: 多媒体技术

webp真的好吗？（上）

flex播放视频

ABPlayer的正确编译姿势

随手搭建了一个弹幕视频播放