大拿分享:如何輕松實現移動端網站視頻轉碼?

現在很多之前的pc端網站現在已經增加瞭移動端網站,方便其用戶在手機端的瀏覽,而手機端的訪問,因為系統環境的不一樣,可能會導致很多差異化的東西,特別是視頻,pc端的視頻如果直接在移動端訪問,很多時候是訪問不瞭的。

如何改變pc端對應的移動端網頁中訪問視頻的代碼,使其支持移動端的觀看。下面,就看看遊迅網SEO總監陳洲的經驗分享:如何輕松實現移動端網站視頻轉碼?

下面以優酷視頻為例進行說明,如何讓網站pc端的優酷視頻資源支持手機端訪問優酷視頻的pc端頁面訪問格式是這樣的:

<embed align=”middle” allowfullscreen=”true” allowscriptaccess=”always” height=”400″ quality=”high” src=”/player.php/sid/XMTUxOTI5Njc3Ng==/v.swf” type=”application/x-shockwave-flash” width=”600″ wmode=”transparent”>

</embed>

這是常見的在內容中夾雜的 視頻播放 代碼,但這種代碼內容,直接展示到 移動端中,是無法播放的,所以,我們可以查到對應的 優酷移動網頁視頻的播放格式,例如:

<iframe src=”/embed/XMTUxOTI5Njc3Ng==” frameborder=0 allowfullscreen>

</iframe>

大傢可以看到,其實優酷移動網頁支持的播放代碼和 pc端移動代碼是有特征碼的,相當於視頻的id,類似我們 pc端對應移動端,都是有對應的相同特征的,所以,隻要我們能找到移動端能播放的對應的視頻代碼,我們就可以動手進行轉碼替換瞭Pc端視頻流代碼(swf格式的):

/player.php/sid/XMTUxOTI5Njc3Ng==/v.swf

移動端視頻流代碼(其實就是優酷的通用代碼):

/embed/XMTUxOTI5Njc3Ng==

這裡的特征碼就在中間這段 XMTUxOTI5Njc3Ng== 在移動端頁面生成過程中,對優酷視頻的代碼進行正則替換,將pc端視頻流代碼 替換成對應的 移動端視頻流代碼,即可。

針對其他的視頻網站替換也是一樣的,找到對應視頻網站的移動網頁播放代碼 校對 pc端播放代碼,找出特征碼,將其他代碼進行替換,這樣,就可以兼容移動端的播放瞭。網上流行的 土豆視頻 愛奇藝視頻 QQ視頻都有對應的移動端播放代碼,這裡就不一一舉例瞭。

延伸閱讀:

  • 移動站點之殤:如何移動化、如何優化?
  • 百度之夜:如何解決網站移動化的痛點?