前幾天的時候，根據工作要求，做了一個小小的wap分享站，本以為時隔幾天，沒聽到測試美女同事們的反饋就萬事大吉了，只是今天早上的時候，同事突然跟我說從app端分享的文章在Android手機上可以正常播放，但是在iOS手機上卻不能正常顯示。恰巧今天又是另外一個項目剛部署到測試服務器，各種問題接踵而至，於是趁着cms3.0的項目空閑的時候，認真的推敲了一下之前wap站的視頻代碼……
在這里，可以分享一個自己對工作或者生活樂在其中的妙招~~~每次遇到問題，只要是影響心情的事情，自己都會默默的在心里定一個念頭，悄悄地告訴自己：如果這個問題或者這個困難一不小心被自己克服了，那就獎勵自己一下，可以做頓好吃的飯或者在網上買件心儀的小玩具，這樣不僅會讓自己的心情超級無限好，也會讓自己又get到處理問題的新技能。
工作以后，基本上做的都是web頁面，這次也是第一次接觸app端，其兼容性也就隨之顯現了。因為我們使用的服務器只支持優酷視頻（這里貌似是道聽途說來的，不太確定哦~，事實就是視頻只支持優酷播放），因此優酷開發者平台就成為我們首先使用的選擇。
優酷開發者平台官網：
下面開始我的心路歷程吧：
拿來id，去數據庫對應的表中查出該id下對應的所有信息，統稱為data,主要任務就是將內容即data.content顯示在頁面中，正常情況下在后台查出來的data，只需要在前台{{#data.content}}渲染一下就可得到相應的內容。—— # 為轉義符
只是由於data的content為視頻的話，存在數據庫中的這個content字段的內容則是醬紫滴：
<p><br/></p><div id="youkuplayer"></div><script type="text/javascript" src="http://player.youku.com/jsapi"></script><script type="text/javascript">player = new YKU.Player('youkuplayer',{styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});</script><p><br/></p><p><br/></p>
如果還是按照一般文章處理的話，{{#data.content}}根本就播放不出視頻文件，最終看頁面代碼的時候，就發現了一個小秘密：
在html頁面中引入優酷js文件：
<script type="text/javascript" src="http://player.youku.com/jsapi">
<div id="youkuplayer"></div>
<script type="text/javascript" src="http://player.youku.com/jsapi"></script>
<script type="text/javascript"> player = new YKU.Player('youkuplayer',{
styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});
</script>
頁面沒有執行的那段js代碼：
<script type="text/javascript"> player = new YKU.Player('youkuplayer',{ styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true}); </script>
於是乎，在后台處理數據的時候單獨處理了一下這段代碼：
... let str = data.content; let scriptArr = str.match(/<script type="text\/javascript">.*<\/script>/g);//用正則匹配script標簽
if (scriptArr && scriptArr.length > 0) { data['scripts'] = scriptArr[0] //取出那段要在頁面執行的js代碼
}
this.assign("data", data);
return this.display();
...
這樣在html頁面上的時候，就只是單獨執行一下這段js即可：
... <!-- /.container -->
<!--返回-->
<div class="sub_box" id="gotoTop">
<div class="back_to_top"></div>
</div>
<script src="/static/js/backtop.js"></script> {{#data.scripts}} </body>
</html>
頁面上的再次去看的時候：
視頻便可以正常播放了~~~
題外話：
上面這段是處理app端顯示視頻的，但是自己並沒有分Android手機或者iOS手機來測，於是在看ios手機的時候，視頻依舊不能播放。在知乎上找到了這樣的解釋：
在線視頻一般都是基於flash和flv來實現的，而眾所周知，iOS的safari不支持網頁中的flash，但支持html5的video標記（顯然這個時代蘋果必須以某種方式支持網絡視頻），對於video標記，會在其區域上顯示播放按鈕，點按后進入全屏播放。
所以優酷等網站會針對iOS做出兼容性處理：
通過user-agent來判斷用戶來源，如果是iOS用戶，則用video標記來替代傳統object，其src的則是源地址（不是flv，而是ts包裝的源，m3u8是個文本文件，其中指定了進一步的ts地址，包括一些視頻分段參數等）；對於其他用戶，則出於兼容性和功能性考慮，依舊使用swf播放器。
可以通過chrome開發者工具，將UA override修改為iOS來自行測試。
<video id="youku-html5-player-video" width="100%" height="100%" x-webkit-airplay="allow" controls="" autoplay="" preload="" src="/player/getM3U8/vid/91861269/type/flv/ts/1332059778/v.m3u8"> </video>
補充一下，一些第三方網站嵌入調用的youku視頻在iOS上無法點擊播放，這是因為第三方網站沒有對其做上述的兼容性判斷切換為video標記所致。
認認真真看了幾個小時，卻依舊沒有理解上面所說的怎樣用video標記來替代傳統object。。。。。只好再另辟蹊徑，
<iframe height=498 width=510 src='http://player.youku.com/embed/XMTg1MjAzMTUwMA==' frameborder=0 'allowfullscreen'></iframe>
使用優酷自帶的通用代碼，唯一的要求就是獲取到類似於 XMTg1MjAzMTUwMA -——> 視頻id，只是我不會用正則來截取vid。。。。。因此這種方法就被擱置了……
。。。。
。。。。
。。。。
中間省略無數字，，，，，，，真的是百感交集。
葉葉有一個缺點：有點心急。通俗點就是性子急，只是深知自己的工作需要足夠的淡定，雖然自己也足夠踏實，但是欠缺的就是沉下心來……找了很久bug，最終感覺自己還是不能憑一己之力解決問題，還是把自己遇到的情況反映給了大神同事CZ，可是我說的情況令他也是丈二和尚摸不着頭腦，接着郡哥過來了，就演變成我們拿着手機去找測試，讓她們復現遇到的問題，居然就發現了端倪：是因為在后台添加視頻的時候沒有添加類似於導語的文字，才使得分享出來的頁面播放不出視頻。大家異口同聲的說，不是我這邊的問題，而是DX大神在處理分享那段代碼的時候，因為截取的時候，沒有判斷是否為視頻，就直接截取，導致視頻播放不出來的結果。
看到這里，聰明的你是不是也覺得這件事跟我就沒多大關系了？
但是，但是，我要說的是但是！葉葉還有一個缺點：倔強。因為在心里，我並不認為這是DX大神那邊分享的問題，而問題的確是在我這里。於是乎，一遍又一遍的拿着測試ios手機，重復着同樣的操作，可是真的只想敲自己，都從數據庫把兩篇文章的content拿出來作對比，除過發現vid不相同外，其他的都一樣，也跟有沒有導讀完全沒有關系。。。。至此，只能去把自己所有的狀況反映給老大。幸好是下班時間，也是他不太忙的時候，最終的原因真的就是令我啼笑皆非了：就是因為vid的問題。我們只能使用優酷自己的視頻，因為這樣才算有版權，而測試的美女們用的都是不支持優酷在第三方播放的視頻，這樣肯定在頁面中顯示不出來了。至此，困擾自己大半天的問題終於解決了，而心里的那塊石頭似乎也消失的無影無蹤。
經驗不足，遇到特殊情況太少！！！！！