阿里雲播放器SDK的正確打開方式 | Aliplayer Web播放器介紹及功能實現（三）

摘要： 阿里雲播放器SDK（ApsaraVideo for Player SDK）是阿里視頻雲端到雲到端服務的重要一環，除了支持點播和直播的基礎播放功能外，還深度融合視頻雲業務，支持視頻的加密播放、安全下載、首屏秒開、低延時等業務場景，爲用戶提供簡單、快速、安全、穩定的視頻播放服務。

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

1、基本概況及功能

• 播放器架構

Aliplayer Web播放器分爲H5和Flash兩個，Flash播放器隨着技術的發展會逐漸被邊緣化，因此咱們之後只作維護，不會更新功能了，重點會放在H5播放器上。H5播放器架構主要分四層，底層H5 Video，播放能力和H5原生Video緊密相關。第二層是基礎播放器，它不依賴於具體業務，經過URL的方式來播放。第三層是爲各類業務場景準備的不一樣的播放器，能夠很容易的擴展，相互隔離不依賴。最上面一層是適配的播放器，會根據終端類型、瀏覽器類型、播放格式和用戶指定來進行智能適配。

• 播放器功能

最近，咱們在播放器端上也實現了截圖、國際化、變速、UI自定義、微信同層播放、自適應播放、加密播放、H5播放flv、自定義插件等功能。後續，咱們還會經過插件的形式實現彈幕、廣告等功能，並會開源到github上，也會支持用戶根據本身業務需求來自定義SDK包。

• 播放器支持視頻格式

• 適配播放

咱們整個視頻播放的基本原則是H5優先，能用H5播放的確定不用Flash去播放。因此在移動端，咱們確定是用H5來播放的，PC端也依照這個原則儘可能使用H5。同時，咱們會判斷瀏覽器類型支持哪一種播放格式，好比m3u8在PC端IE11以上的瀏覽器才能播放，若是遇到IE11如下的瀏覽器，咱們自動會選擇Flash播放。在視頻格式方面，假設視頻是rtmp和flv，咱們會自動選擇Flash播放。另外，若是用戶自主設置useH5Prism和useFlashPrism屬性，那咱們也會依照用戶的選擇。

• 瀏覽器支持狀況

FLASH支持IE8以上，在瀏覽器上啓動容許FLASH運行便可；H5支持IE9以上，m3u8須要在IE11以上才能夠運行；其餘瀏覽器都也都是能夠支持的。

• 兩種播放方式

1. source，經過url 去播放
2. 經過點播vid+playauth去播放，第二種方式和視頻雲結合比較緊密

• 點播播放格式的選擇

點播服務中轉碼生成的視頻格式有不少，包括m3u八、flv、mp4等。播放器有本身的一套邏輯去選擇播放格式。對於H5來講，默認播放低清版原本節省流量，若是用戶使用了切換清晰度的功能，那咱們會默認打開他選擇的版本。格式方面，則默認播放mp4，用戶也能夠設置qualitySort來優先播放高清的的版本。對於Flash來講，默認格式順序是m3u八、flv、mp4。

2、功能介紹及啓用

• 建立播放器

1. 引用正確的JS和CSS文件
2. 添加播放器容器 須要設置容器的id屬性，另外2.0.1以前的版本要添加prism-player類型。

• New Aliplayer建立播放

• 在線配置，用戶能夠預先體驗下播放器的狀況

• Aliplayer-Cli建立演示例子

用戶須要演示例子的時候，不須要寫不少代碼，經過這個命令，就能夠建立例子，直接體驗AliPlayer。

• PC端支持m3u8

播放域名啓用容許跨域訪問

• 訂閱和取消事件

• 清晰度切換

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

• 手動切換視頻-H5

這個功能播放器內比較常見。咱們把它分紅兩種狀況去處理，若是是地址播放，咱們經過loadByUrl來播放；若是是vid+playauth播放，咱們經過replayByVidAndPlayAuth的方法來播放。

• 手動切換視頻-flash

地址播放方法與H5的方法同樣，vid+playauth播放則須要先銷燬播放器，再從新建立播放。

• 不一樣地址格式的切換

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

• UI自定義

不少用戶有這個需求，因此咱們的UI是能夠隱藏掉的。提供了一個skinLayout的屬性，當這個屬性沒有指定值的時候，UI組件是所有顯示。若是是空數組的時候，UI組件所有不顯示。而且能夠自定義組件的顯示和位置，在默認UI基礎上去裁剪，2.3.0版本之後，用戶也能夠經過自定義插件的方式自定義本身的UI。

• 截屏

H5啓用:

FLASH啓用：snapshot:true
H5播放器，播放域名需添加容許跨域訪問的header
支持訂閱snapshoted事件，獲取截屏的時間點和數據：

支持設置截圖的大小和質量：

支持添加文字水印：

• 邊轉變播功能

邊轉邊播是MTS的功能，播放器能夠支持這種場景的播放。第一次觀看的時候調用MTS API啓動轉碼，邊轉碼邊播放，並且能夠設置延遲播放。轉碼中使用直播播放器，轉碼完成後使用點播方式播放。

• H5 android微信同層播放

由於H5在android端微信打開時，會自動全屏播放，覆蓋Dom元素。
同層播放通常有兩種業務場景，一種是點播的，視頻在某個地方播放，下面的評論、播放列表等,demo地址：https://github.com/alilmq/h5demo

還要一種場景是直播場景，視頻須要全屏。能夠經過設置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屬性，用於啓用各類語言，默認爲zh-cn，可選值爲zh-cn or en-us。

• 倍速播放

提供UI的版本，只提供了0.五、一、1.五、2四種倍速播放；而setspeed方法，能夠隨意設置倍速播放。這個可能會有一些限制，移動端有的瀏覽器會不支持，好比android微信。

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

在播放失敗時候，會嘗試從新播放，觸發onM3u8Retry事件，事件裏能夠作一些提示，好比主播離開請稍等；若是幾回嘗試後仍是失敗，會出發livestreamstop事件，事件裏作一些直播失敗或結束的提示。

---

3、其餘輔助功能及工具

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

• 診斷工具

經過錯誤碼描述的映射關係，大概能知道用戶的錯誤所在；
經過vid知道用戶播放的是哪一個視頻；
經過uuid這個惟一標識，能夠在日誌系統中查到用戶的播放狀態；
經過requestid和播放時間，能夠定位到用戶的錯誤是哪次播放的錯誤和具體的播放時間。
這裏還有一個診斷的功能，能夠知道用戶環境的具體信息，省去手工獲取視頻的繁瑣，能夠快速診斷問題。
地址：http://player.alicdn.com/detection.html

• 檢測工具

關於視頻播放失敗，咱們提供了三種方式，原生H五、阿里雲H五、阿里雲Flash。咱們把播放的日誌調出來，經過日誌來狀況來判斷播放失敗的緣由。舉個例子，若是用戶剛開始請求數據時就失敗的話，那咱們會猜想存在鑑權失敗的狀況；若是加載數據出錯，那多是用戶的網絡的緣由；若是是開始播放後出錯，可能就問題就出在解析或播放器不支持等方面。

• ffmpeg查看視頻信息

有的用戶只有畫面，沒有聲音。咱們能夠經過ffmpeg能夠看下視頻的格式、流的狀況、碼率、幀率等。

最後，阿里雲播放器的全部狀況都聚合在如下的網站上：
http://player.alicdn.com/detection.html，其中包括幫助文檔、在線配置、診斷工具、產品demo等，你們能夠登陸瞭解詳情。

本文爲雲棲社區原創內容，未經容許不得轉載，如需轉載請發送郵件至yqeditor@list.alibaba-inc.com；若是您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：yqgroup@service.aliyun.com 進行舉報，並提供相關證據，一經查實，本社區將馬上刪除涉嫌侵權內容。

原文連接