天天看點

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

阿裡雲播放器SDK(ApsaraVideo for Player SDK)是阿裡視訊雲端到雲到端服務的重要一環,除了支援點播和直播的基礎播放功能外,還深度融合視訊雲業務,支援視訊的加密播放、安全下載下傳、首屏秒開、低延時等業務場景,為使用者提供簡單、快速、安全、穩定的視訊播放服務。本文銜接上文,詳細介紹web播放器的功能及實作。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

播放器架構

Aliplayer Web播放器分為H5和Flash兩個,Flash播放器随着技術的發展會逐漸被邊緣化,是以我們以後隻做維護,不會更新功能了,重點會放在H5播放器上。H5播放器架構主要分四層,底層H5 Video,播放能力和H5原生Video緊密相關。第二層是基礎播放器,它不依賴于具體業務,通過URL的方式來播放。第三層是為各種業務場景準備的不同的播放器,可以很容易的擴充,互相隔離不依賴。最上面一層是适配的播放器,會根據終端類型、浏覽器類型、播放格式和使用者指定來進行智能适配。

播放器功能

最近,我們在播放器端上也實作了截圖、國際化、變速、UI自定義、微信同層播放、自适應播放、加密播放、H5播放flv、自定義插件等功能。後續,我們還會通過插件的形式實作彈幕、廣告等功能,并會開源到github上,也會支援使用者根據自己業務需求來自定義SDK包。

播放器支援視訊格式

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

适配播放

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

浏覽器支援情況

FLASH支援IE8以上,在浏覽器上啟動允許FLASH運作即可;H5支援IE9以上,m3u8需要在IE11以上才可以運作;其他浏覽器都也都是可以支援的。

兩種播放方式

source,通過url 去播放

通過點播vid+playauth去播放,第二種方式和視訊雲結合比較緊密

點播播放格式的選擇

點播服務中轉碼生成的視訊格式有很多,包括m3u8、flv、mp4等。播放器有自己的一套邏輯去選擇播放格式。對于H5來說,預設播放低清版本來節省流量,如果使用者使用了切換清晰度的功能,那我們會預設打開他選擇的版本。格式方面,則預設播放mp4,使用者也可以設定qualitySort來優先播放高清的的版本。對于Flash來說,預設格式順序是m3u8、flv、mp4。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

建立播放器

引用正确的JS和CSS檔案

添加播放器容器

需要設定容器的id屬性,另外2.0.1之前的版本要添加prism-player類型。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

New Aliplayer建立播放

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

線上配置,使用者可以預先體驗下播放器的情況

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

Aliplayer-Cli建立示範例子

使用者需要示範例子的時候,不需要寫很多代碼,通過這個指令,就可以建立例子,直接體驗AliPlayer。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

PC端支援m3u8

播放域名啟用允許跨域通路

訂閱和取消事件

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

清晰度切換

H5 1.9.9以後的版本和id+playauth播放方式才支援清晰度切換;支援記憶選擇的清晰度,當選擇的清晰度不能播放時,自動選擇下一個清晰度播放。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

手動切換視訊-H5

這個功能播放器内比較常見。我們把它分成兩種情況去處理,如果是位址播放,我們通過loadByUrl來播放;如果是vid+playauth播放,我們通過replayByVidAndPlayAuth的方法來播放。

手動切換視訊-flash

位址播放方法與H5的方法一樣,vid+playauth播放則需要先銷毀播放器,再重新建立播放。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

不同位址格式的切換

![b_3_7]

UI自定義

很多使用者有這個需求,是以我們的UI是可以隐藏掉的。提供了一個skinLayout的屬性,當這個屬性沒有指定值的時候,UI元件是全部顯示。如果是空數組的時候,UI元件全部不顯示。并且可以自定義元件的顯示和位置,在預設UI基礎上去裁剪,2.3.0版本以後,使用者也可以通過自定義插件的方式自定義自己的UI。

截屏

H5啟用:

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

FLASH啟用:snapshot:true

H5播放器,播放域名需添加允許跨域通路的header

支援訂閱snapshoted事件,擷取截屏的時間點和資料:

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

支援設定截圖的大小和品質:

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

支援添加文字水印:

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

邊轉變播功能

邊轉邊播是MTS的功能,播放器可以支援這種場景的播放。第一次觀看的時候調用MTS API啟動轉碼,邊轉碼邊播放,而且可以設定延遲播放。轉碼中使用直播播放器,轉碼完成後使用點播方式播放。

H5 android微信同層播放

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

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

<a href="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</a>

<a href="https://yq.aliyun.com/articles/219539">http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html</a>

國際化

提供language屬性,用于啟用各種語言,預設為zh-cn,可選值為zh-cn or en-us。

倍速播放

提供UI的版本,隻提供了0.5、1、1.5、2四種倍速播放;而setspeed方法,可以随意設定倍速播放。這個可能會有一些限制,移動端有的浏覽器會不支援,比如android微信。

對于直播播放失敗的處理

在播放失敗時候,會嘗試重新播放,觸發onM3u8Retry事件,事件裡可以做一些提示,比如主播離開請稍等;如果幾次嘗試後還是失敗,會出發livestreamstop事件,事件裡做一些直播失敗或結束的提示。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

我們也做了一些輔助工具,友善使用者去接入和排查問題。

診斷工具

通過錯誤碼描述的映射關系,大概能知道使用者的錯誤所在;

通過vid知道使用者播放的是哪個視訊;

通過uuid這個唯一辨別,可以在日志系統中查到使用者的播放狀态;

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

這裡還有一個診斷的功能,可以知道使用者環境的具體資訊,省去手工擷取視訊的繁瑣,可以快速診斷問題。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)

檢測工具

關于視訊播放失敗,我們提供了三種方式,原生H5、阿裡雲H5、阿裡雲Flash。我們把播放的日志調出來,通過日志來情況來判斷播放失敗的原因。舉個例子,如果使用者剛開始請求資料時就失敗的話,那我們會猜測存在鑒權失敗的情況;如果加載資料出錯,那可能是使用者的網絡的原因;如果是開始播放後出錯,可能就問題就出在解析或播放器不支援等方面。

ffmpeg檢視視訊資訊

有的使用者隻有畫面,沒有聲音。我們可以通過ffmpeg可以看下視訊的格式、流的情況、碼率、幀率等。

最後,阿裡雲播放器的所有情況都聚合在以下的網站上:

為了扶持更多創業者,降低入行門檻,視訊點播已在原有的視訊點播服務五個套餐包基礎上,推出了超值體驗套餐包。

隻需9.9元即可獲得10GB流量、50GB存儲、100分鐘轉碼,可供個人、小微企業門戶網站體驗使用。

阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)
阿裡雲播放器SDK的正确打開方式 | Aliplayer Web播放器介紹及功能實作(三)