輕松實現移動端網站視頻轉碼
爲(For)了(Got it)方便用(Use)戶在(Exist)手機端的(Of)浏覽,越來越多的(Of)pc端網站走上(Superior)移動化之路,而手機端的(Of)訪問,因爲(For)系統環境的(Of)不(No)一(One)樣,可能會導緻很多差異化的(Of)東西,特别是(Yes)視頻,pc端的(Of)視頻如果直接在(Exist)移動端訪問,很多時(Hour)候是(Yes)訪問不(No)了(Got it)的(Of)。
如何改變pc端對應的(Of)移動端網頁中訪問視頻的(Of)代碼,使其支持移動端的(Of)觀看。今天我們分享如何輕松實現移動端網站視頻轉碼!
下面以(By)優酷視頻爲(For)例進行說明,如何讓網站pc端的(Of)優酷視頻資源支持手機端訪問優酷視頻的(Of)pc端頁面訪問格式是(Yes)這(This)樣的(Of):
<embed align="middle" allowfullscreen="true" allowscriptaccess="always" height="400" quality="high" src="static/file/v.html" type="application/x-shockwave-flash" width="600" wmode="transparent"></embed>
這(This)是(Yes)常見的(Of)在(Exist)内容中夾雜的(Of)視頻播放代碼,但這(This)種代碼内容,直接展示到 移動端中,是(Yes)無法播放的(Of),所以(By)我們可以(By)查到對應的(Of)優酷移動網頁視頻的(Of)播放格式,例如:
<iframe src="http://player.youku.com/embed/XMTUxOTI5Njc3Ng==" frameborder=0 allowfullscreen></iframe>
大(Big)家可以(By)看到,其實優酷移動網頁支持的(Of)播放代碼和(And) pc端播放代碼是(Yes)有特征碼的(Of),相當于(At)視頻的(Of)id,類似我們 pc端對應移動端,都是(Yes)有對應的(Of)相同特征的(Of),所以(By),隻要(Want)我們能找到移動端能播放的(Of)對應的(Of)視頻代碼,我們就可以(By)動手進行轉碼替換了(Got it)Pc端視頻流代碼(swf格式的(Of)):static/file/v.html
移動端視頻流代碼(其實就是(Yes)優酷的(Of)通用(Use)代碼):http://player.youku.com/embed/XMTUxOTI5Njc3Ng==
這(This)裏的(Of)特征碼就在(Exist)中間這(This)段 “XMTUxOTI5Njc3Ng==” 在(Exist)移動端頁面生成過程中,對優酷視頻的(Of)代碼進行正則替換,将pc端視頻流代碼 替換成對應的(Of) 移動端視頻流代碼,即可。
針對其他(He)的(Of)視頻網站替換也是(Yes)一(One)樣的(Of),找到對應視頻網站的(Of)移動網頁播放代碼 校對 pc端播放代碼,找出(Out)特征碼,将其他(He)代碼進行替換,這(This)樣,就可以(By)兼容移動端的(Of)播放了(Got it)。網上(Superior)流行的(Of)土豆視頻、愛奇藝視頻、QQ視頻都有對應的(Of)移動端播放代碼,這(This)裏就不(No)一(One)一(One)舉例了(Got it)。
- 上(Superior)一(One)篇:談談web網頁設計中的(Of)留白原理(2016版)
- 下一(One)篇:一(One)個(Indivual)新成立的(Of)公司做個(Indivual)企業的(Of)官方宣傳網站到底有沒有必要(Want)