遨遊瀏覽器“廣告快進”產品思考和技術初探
作者：magictong
前言
這個功能個人覺得在產品側的創新要大於在技術側創新，因此花了較大篇幅來講解該對該功能的產品體驗和產品思考，而把技術分析放在了最後面。
背景
視頻網站播放視頻時，前面長達30秒，甚至60秒的視頻廣告一直是用戶的痛點，這個在我們做廣告過濾功能時多次聽到用戶反饋過，其實我們自己也挺煩的，但是我們之前的攔截方案是強技術的，直接攔截視頻廣告資源鏈接，干擾視頻播放器的行爲，更改用戶的hosts信息等等方式，這種攔截方式有很大的法律風險（參考[1]）。另外，騰訊視頻那邊也多次找到我們協商去掉對騰訊視頻廣告的攔截，迫於一些法律風險，視頻廣告頻繁的對抗，造成攔截難度越來越高，因此後來我們的廣告攔截逐步去掉了視頻網站播放前廣告的攔截。
而最近（2014/2/24）遨遊瀏覽器推出了一款“廣告快進”版本，爲了推廣該功能，廣告是鋪天蓋地，連萬利達一樓的電視廣告上面都放了遨遊的廣告快進廣告。
產品體驗
第一時間裝上了遨遊的這個廣告快進版本進行體驗，發現確實可以快進優酷，愛奇藝，鳳凰網等主流視頻網站的廣告，甚至連視頻內容本身都可以快進。
然而主流視頻網站的反制跟進也非常迅速（參考[2]），首先是25號早晨（可能更早）優酷發現如果廣告被快進了，直接提示“本網站不支持您所使用的瀏覽器”。牛逼轟轟的，有點感覺是做了一個艱難的決定^_^。
到了25號晚上，優酷做了技術上面的反制，優酷的廣告無法快進了，但是視頻內容本身還可以快進。同樣是25號晚上，遨遊瀏覽器做了升級，把首頁宣傳廣告快進的視頻樣例換成了愛奇藝的（不換不行了，快進不了優酷了嘛）。
目前還沒有看到其它的視頻網站做出反制措施，可能還在觀望，畢竟目前傲遊瀏覽器的市場份額少得有那麼一點可憐（CNZZ數據：2%左右）。也許遨遊這次的出風頭是爲了找下一家也不一定。
產品思考
遨遊的這種方式可以認爲是一個產品上面的創新，既可以給到用戶一個滿意的體驗，60秒的廣告，可能5秒就快進完了，又不會顯得很暴力，我沒有攔截你的廣告呀，我只是給了用戶一個快進的入口，有點打擦邊球的感覺。但是你想過視頻網站的感受沒？！外面一片叫好聲那是因爲他們不是視頻網站的開發者和運營者，換位思考一下，如果用戶覺得電腦管家掃描病毒太慢了，修補漏洞太慢了，有個廠商說我出了一個“管家保姆”，提升掃描病毒的速度，然後把一系列關鍵API給掛鉤了，讓管家跳着掃描，速度果然快了，管家能接受了嗎？！例子不太合適，但是我想優酷，愛奇異目前的心情應該是類似的^_^。
另外視頻網站可以做的反制措施是很多的，再說你把廣告快進了會影響視頻網站收入嗎？！當然會影響的！因此反制會是強烈的嗎？！當然是強烈的！這簡直就是紅果果的“羞辱”視頻網站的播放器技術嘛，如果我是優酷視頻播放器的開發者，你覺得我會不會死命的反制呢？！
另外一點是像遨遊這種首創，雖然可能很快就被反制了，但是廣告效應是有了，對它們也是有利的，投入產出比相當低，而我們再跟進一個類似功能，意義可能不大。遨遊可能開發這個功能花了一個月，視頻網站可能幾個小時就反制了。我們再去開發，一個月可能是搞不定的，畢竟管家沒有自己的瀏覽器，後面的技術部分會講到爲什麼這個地方沒有瀏覽器是難點。
有沒有什麼其它的方案？也有一些童鞋提到過，我們可以在視頻放廣告的時候，提醒用戶去幹別的事情，然後在廣告播完之後，彈一個輕Tips告訴用戶，廣告放完啦，可以看視頻了，也許是一種方法，重點是讓用戶覺得沒有浪費時間，又沒有錯過視頻的觀看。
建議我們可以先觀察一下視頻網站和遨遊的戰況情況吧。
技術初探
其實像swf這種視頻的快進是很容易實現的，因爲flash是支持js腳本調用它的導出接口的，而播放swf的默認播放器導出了很多視頻播放控制接口（參考[3]），可以寫一個小例子來看一下。
<html>
<head>
<title>flash快進</title>
</head>
<body>
<script type="text/javascript">
// Get Flash Object
functiongetFlashMovieObject(movieName)
{
if (window.document[movieName])
{
returnwindow.document[movieName];
}
else if (navigator.appName.indexOf("Microsoft")==-1)
{
if (document.embeds &&document.embeds[movieName])
returndocument.embeds[movieName];
}
else
{
returndocument.getElementById(movieName);
}
}
</script>
<p>
Game(swf)<br/>
<object id="GameFlashObj2"classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="550" height="400">
<param name="movie"value="1.swf">
<param name="quality"value="high">
<param name="play"value="false">
<embed id="GameFlashObj2"src="1.swf"play="false" quality="high"pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash" width="550"height="400"></embed>
</object>
</p>
<input type="button" value="播放SWF"id="playSWF"> <inputtype="button" value="停止SWF" id="stopSWF"><br/>
<input type="button" value="快進SWF(+100幀)"id="fastSWF">
<script type="text/javascript">
varbtnplay= document.getElementById("playSWF");
btnplay.onclick =function()
{
getFlashMovieObject("GameFlashObj2").Play();
}
varbtnfast= document.getElementById("fastSWF");
btnfast.onclick =function()
{
varobjFlash= getFlashMovieObject("GameFlashObj2");
if (objFlash &&objFlash.IsPlaying())
{
objFlash.GotoFrame(objFlash.CurrentFrame() + 100);// 4097Frame
objFlash.Play();
}
}
varbtnstop= document.getElementById("stopSWF");
btnstop.onclick =function()
{
getFlashMovieObject("GameFlashObj2").StopPlay();
}
</script>
</body>
</html>
這個例子非常簡單，用來控制swf文件的播放是完全沒有問題的，而且控制代碼可以跨瀏覽器跨平臺。想快進的話簡單調用swf播放器的跳幀接口就實現了。
事情如此簡單嗎？！顯然不是，那是因爲視頻網站播放的根本不是swf文件，而主要是f4v文件，這其實也是Adobe弄出來的一種高清視頻格式，需要使用flash來播放，但是默認的flash播放器是勝任不了的，因此就需要使用flash來寫一些專用的播放器，這些專用播放器也算的上是各大視頻網站在客戶端上運行的唯一有點技術含量的東東了，因此內部的複雜性也就可想而知，優酷有自己的播放器，愛奇異也有自己的播放器，大家都是不一樣的。像下面這段愛奇異視頻的播放HTML代碼（截取自Chrome，IE下面可能會有微小差異），Play.swf這個玩意就是愛奇異自己的視頻播放器，你可以下下來反編譯一下，至於真正播放的視頻的地址和廣告地址等等都在flahsVars參數裏面。
最開始我的想法是，遨遊可能是腳本層面控制了這些視頻播放器，但是找遍了也沒有看到類似的控制腳本，而至於去反編譯一款視頻網站的播放器來研究，看起來則是一個不太可能完成的任務，像下面這個愛奇異的播放器反編譯結果，裏面類都有上千個，勿論去看每個類的代碼了。何況視頻網站這麼多，每個都分析一遍，一個月是不可能完成的。
因此，遨遊通過直接控制各種播放器的方式來快進的方式應該是不太可能的，雖然這樣對於瀏覽器的兼容性可能會更好。
我實際編寫了一些JS腳本去試圖控制這些視頻網站的播放，也都失敗了。
另外一種可能的技術方案是控制flash的視頻流，畢竟你的播放器要通過瀏覽器去下載視頻的資源，在這個過程中，如果能夠做一些手腳，控制視頻的播放速度是有可能的。但是這裏有幾個問題存在。
1、不同版本的flash插件處理音頻流和視頻流是有差別的，有些甚至差別還很大，尤其是IE下面，N個版本。
2、瀏覽器內核有很多，在不同的內核下面，flash的插件肯定是不一樣的。像IE下面flash插件是一個ocx控件，而chrome下面flash的插件就是一個npapi插件。
3、不同熱度的視頻資源，視頻網站使用了不同的廣告投放技術方案，熱度更高的視頻，相對來說廣告不容易屏蔽。
這是最主要的難點，也是我在上面說到爲什麼管家不容易做的原因，因爲管家自己是插件注入到形形色色的瀏覽器裏面，各種瀏覽器內核，各種flash控件\插件版本，要解決這些兼容性問題就是一個無窮無盡的事情。而如果有自己的瀏覽器，那事情就簡單多了，在研究遨遊的過程中，發現遨遊巧妙的解決了這個問題，遨遊本身是雙核瀏覽器，但是它在用戶觀看視頻網站時，鎖定爲Chrome內核，用戶無法切換內核。
另外就是打包了一個固定版本的flash.dll文件（Adobe公司，改名成NPSWF*.dll）。
這樣它只需要處理這一個版本的flash插件即可，就解決了不同的flash版本之間的音視頻解碼的差異問題。
但是目前還是不清楚，遨遊具體使用了什麼技術方案，貌似也沒有什麼分析頭緒，只好拿着遨遊的老版本和新版本對比，查看各種可能的技術方案，網上查找各種控制視頻流的技術方案，此處省略5000字……
最後發現新版本遨遊自己掛鉤了幾個時間相關的API，時間！而進行InlineHook的那個dll是遨遊自己MxVodCtrl.dll，嗯，從這個名字上面來看，好像是那麼回事。
驗證一下。把這幾個鉤子恢復一下，遨遊的快進功能真的完蛋了。原來如些！
剩下的任務是枯燥的逆向這幾個API鉤子都幹了些什麼事情，但是可以大概的想象一下，它既然是Hook的時間相關的API，那麼就說明那些視頻播放器裏面也調用了這些API，它們調用這些API的目的不外乎控制目前的播放進度和播放時間，當然最主要的事情可能還是計算需要讀多長的視頻緩存呢？嗯，發揮小夥伴的想象力吧！
至於網站反制顯然也很容易，它只要使用其它的方法來統計廣告的總共播放時間，甚至做timestamp校驗，就能繞過這個“廣告快進”。這也是爲什麼遨遊辛辛苦苦幾個月，優酷分分鐘就反制了的原因。你的技術方案依賴人家的技術實現嘛。
因爲目前我們暫時是觀望態度，沒有對這個技術做更深入的分析（如果需要的話，估計需要幾天的時間來逆向那些APIHOOK函數，另外最好是有在WEB視頻播放這塊比較熟悉的開發介紹一下視頻播放的過程，對逆向會更有利）。
參考資料
[1] 金山優酷陷官司糾紛互訴不正當競爭各勝一場http://tech.qq.com/a/20131227/016573.htm
[2] 遨遊聲音太大，視頻網站反彈http://info.broadcast.hc360.com/2014/02/260952592240.shtml
[3] JS控制網頁中Flash影片的播放（附帶各參數）http://blog.csdn.net/lzkkevin/article/details/6789593
[4] JS傳值給flashhttp://blog.csdn.net/lulu_jiang/article/details/6233493
[5] flv f4v 格式web 網頁嵌入 源代碼http://blog.163.com/w_jingli/blog/static/3825536920100445944690/
[6] Javascript與Flash通信全解析https://www.imququ.com/post/39.html
[7] js調用flash中定義的方法http://www.phpvar.com/archives/2769.html
[8] ActionScript與javascript相互調用http://blog.csdn.net/u010150082/article/details/14446087