里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務(wù)的重要一環(huán)，除了支持點播和直播的基礎(chǔ)播放功能外，還深度融合視頻云業(yè)務(wù)，支持視頻的加密播放、安全下載、首屏秒開、低延時等業(yè)務(wù)場景，為用戶提供簡單、快速、安全、穩(wěn)定的視頻播放服務(wù)。本文銜接上文，詳細(xì)介紹web播放器的功能及實現(xiàn)。

一、基本概況及功能

• 播放器架構(gòu)

Aliplayer Web播放器分為H5和Flash兩個，F(xiàn)lash播放器隨著技術(shù)的發(fā)展會逐漸被邊緣化，所以我們以后只做維護(hù)，不會更新功能了，重點會放在H5播放器上。H5播放器架構(gòu)主要分四層，底層H5 Video，播放能力和H5原生Video緊密相關(guān)。第二層是基礎(chǔ)播放器，它不依賴于具體業(yè)務(wù)，通過URL的方式來播放。第三層是為各種業(yè)務(wù)場景準(zhǔn)備的不同的播放器，可以很容易的擴(kuò)展，相互隔離不依賴。最上面一層是適配的播放器，會根據(jù)終端類型、瀏覽器類型、播放格式和用戶指定來進(jìn)行智能適配。

• 播放器功能

最近，我們在播放器端上也實現(xiàn)了截圖、國際化、變速、UI自定義、微信同層播放、自適應(yīng)播放、加密播放、H5播放flv、自定義插件等功能。后續(xù)，我們還會通過插件的形式實現(xiàn)彈幕、廣告等功能，并會開源到github上，也會支持用戶根據(jù)自己業(yè)務(wù)需求來自定義SDK包。

• 播放器支持視頻格式

• 適配播放

我們整個視頻播放的基本原則是H5優(yōu)先，能用H5播放的肯定不用Flash去播放。所以在移動端，我們肯定是用H5來播放的，PC端也依照這個原則盡量使用H5。同時，我們會判斷瀏覽器類型支持哪種播放格式，比如m3u8在PC端IE11以上的瀏覽器才能播放，如果遇到IE11以下的瀏覽器，我們自動會選擇Flash播放。在視頻格式方面，假設(shè)視頻是rtmp和flv，我們會自動選擇Flash播放。另外，如果用戶自主設(shè)置useH5Prism和useFlashPrism屬性，那我們也會依照用戶的選擇。

• 瀏覽器支持情況

FLASH支持IE8以上，在瀏覽器上啟動允許FLASH運(yùn)行即可；H5支持IE9以上，m3u8需要在IE11以上才可以運(yùn)行；其他瀏覽器都也都是可以支持的。

• 兩種播放方式

1. source，通過url 去播放

2. 通過點播vid+playauth去播放，第二種方式和視頻云結(jié)合比較緊密

• 點播播放格式的選擇

點播服務(wù)中轉(zhuǎn)碼生成的視頻格式有很多，包括m3u8、flv、mp4等。播放器有自己的一套邏輯去選擇播放格式。對于H5來說，默認(rèn)播放低清版本來節(jié)省流量，如果用戶使用了切換清晰度的功能，那我們會默認(rèn)打開他選擇的版本。格式方面，則默認(rèn)播放mp4，用戶也可以設(shè)置qualitySort來優(yōu)先播放高清的的版本。對于Flash來說，默認(rèn)格式順序是m3u8、flv、mp4。

二、功能介紹及啟用

• 創(chuàng)建播放器

1. 引用正確的JS和CSS文件

2. 添加播放器容器 需要設(shè)置容器的id屬性，另外2.0.1之前的版本要添加prism-player類型。

• New Aliplayer創(chuàng)建播放

• 在線配置，用戶可以預(yù)先體驗下播放器的情況

• Aliplayer-Cli創(chuàng)建演示例子

用戶需要演示例子的時候，不需要寫很多代碼，通過這個命令，就可以創(chuàng)建例子，直接體驗AliPlayer。

• PC端支持m3u8

播放域名啟用允許跨域訪問

• 訂閱和取消事件

• 清晰度切換

H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切換；支持記憶選擇的清晰度，當(dāng)選擇的清晰度不能播放時，自動選擇下一個清晰度播放。

• 手動切換視頻-H5

這個功能播放器內(nèi)比較常見。我們把它分成兩種情況去處理，如果是地址播放，我們通過loadByUrl來播放；如果是vid+playauth播放，我們通過replayByVidAndPlayAuth的方法來播放。

• 手動切換視頻-flash

地址播放方法與H5的方法一樣，vid+playauth播放則需要先銷毀播放器，再重新創(chuàng)建播放。

• 不同地址格式的切換

只能先銷毀播放器，再重新選擇正確的播放器播放。Github地址看simple demo：https://github.com/alilmq/aliplayer-simple-demo

![b_3_7]

• UI自定義

很多用戶有這個需求，所以我們的UI是可以隱藏掉的。提供了一個skinLayout的屬性，當(dāng)這個屬性沒有指定值的時候，UI組件是全部顯示。如果是空數(shù)組的時候，UI組件全部不顯示。并且可以自定義組件的顯示和位置，在默認(rèn)UI基礎(chǔ)上去裁剪，2.3.0版本以后，用戶也可以通過自定義插件的方式自定義自己的UI。

• 截屏

H5啟用:

FLASH啟用：snapshot:true

H5播放器，播放域名需添加允許跨域訪問的header

支持訂閱snapshoted事件，獲取截屏的時間點和數(shù)據(jù)：

支持設(shè)置截圖的大小和質(zhì)量：

支持添加文字水印：

• 邊轉(zhuǎn)變播功能

邊轉(zhuǎn)邊播是MTS的功能，播放器可以支持這種場景的播放。第一次觀看的時候調(diào)用MTS API啟動轉(zhuǎn)碼，邊轉(zhuǎn)碼邊播放，而且可以設(shè)置延遲播放。轉(zhuǎn)碼中使用直播播放器，轉(zhuǎn)碼完成后使用點播方式播放。

• H5 android微信同層播放

因為H5在android端微信打開時，會自動全屏播放，覆蓋Dom元素。

同層播放一般有兩種業(yè)務(wù)場景，一種是點播的，視頻在某個地方播放，下面的評論、播放列表等,demo地址：https://github.com/alilmq/h5demo

還要一種場景是直播場景，視頻需要全屏。可以通過設(shè)置x5_type:h5啟用同層播放。Demo 地址：https://github.com/alilmq/h5livedemo

另外H5微信同層播放，有兩篇文章可以參考:

http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html

http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html

• 國際化

提供language屬性，用于啟用各種語言，默認(rèn)為zh-cn，可選值為zh-cn or en-us。

• 倍速播放

提供UI的版本，只提供了0.5、1、1.5、2四種倍速播放；而setspeed方法，可以隨意設(shè)置倍速播放。這個可能會有一些限制，移動端有的瀏覽器會不支持，比如android微信。

• 對于直播播放失敗的處理

在播放失敗時候，會嘗試重新播放，觸發(fā)onM3u8Retry事件，事件里可以做一些提示，比如主播離開請稍等；如果幾次嘗試后還是失敗，會出發(fā)livestreamstop事件，事件里做一些直播失敗或結(jié)束的提示。

三、其他輔助功能及工具

我們也做了一些輔助工具，方便用戶去接入和排查問題。

• 診斷工具

通過錯誤碼描述的映射關(guān)系，大概能知道用戶的錯誤所在；

通過vid知道用戶播放的是哪個視頻；

通過uuid這個唯一標(biāo)識，可以在日志系統(tǒng)中查到用戶的播放狀態(tài)；

通過requestid和播放時間，可以定位到用戶的錯誤是哪次播放的錯誤和具體的播放時間。

這里還有一個診斷的功能，可以知道用戶環(huán)境的具體信息，省去手工獲取視頻的繁瑣，可以快速診斷問題。

地址：http://player.alicdn.com/detection.html

• 檢測工具

關(guān)于視頻播放失敗，我們提供了三種方式，原生H5、阿里云H5、阿里云Flash。我們把播放的日志調(diào)出來，通過日志來情況來判斷播放失敗的原因。舉個例子，如果用戶剛開始請求數(shù)據(jù)時就失敗的話，那我們會猜測存在鑒權(quán)失敗的情況；如果加載數(shù)據(jù)出錯，那可能是用戶的網(wǎng)絡(luò)的原因；如果是開始播放后出錯，可能就問題就出在解析或播放器不支持等方面。

• ffmpeg查看視頻信息

有的用戶只有畫面，沒有聲音。我們可以通過ffmpeg可以看下視頻的格式、流的情況、碼率、幀率等。

最后，阿里云播放器的所有情況都聚合在以下的網(wǎng)站上：

http://player.alicdn.com/detection.html，其中包括幫助文檔、在線配置、診斷工具、產(chǎn)品demo等，大家可以登錄了解詳情。

天給大家分享一個可以將視頻作為網(wǎng)頁背景的插件！效果展示地址：http://39.108.141.146/

需要源代碼的童鞋評論里留個郵箱或者私信我也可以，我發(fā)給你們！

效果截圖

下載源碼解壓！

項目結(jié)構(gòu)圖

我們將想要展示的視頻存放在assets文件夾，然后右鍵點擊index.html選擇用記事本打開，如下圖，修改視頻地址！

如何修改視頻背景

index2.html是全屏作為背景，修改方式和index.html一樣的！

修改完后點擊保存，然后用瀏覽器分別打開這兩個文件就可以看到效果了！

當(dāng)然也可以發(fā)布到網(wǎng)上給別人看！發(fā)布的方法→原來自己建網(wǎng)站這么簡單！