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

姬子玉發表於2017-11-12
阿里播放器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包。

_3_1

我們整個視訊播放的基本原則是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去播放，第二種方式和視訊雲結合比較緊密

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

_2017_11_09_2_58_11

二、功能介紹及啟用

  1. 引用正確的JS和CSS檔案
  2. 新增播放器容器 需要設定容器的id屬性，另外2.0.1之前的版本要新增prism-player型別。

_3_3

_3_4

_3_5

使用者需要演示例子的時候，不需要寫很多程式碼，通過這個命令，就可以建立例子，直接體驗AliPlayer。

_3_6

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

b_3_7

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

_3_7

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

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

_3_8

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

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

H5啟用:
_3_10

FLASH啟用：snapshot:true
H5播放器，播放域名需新增允許跨域訪問的header
支援訂閱snapshoted事件，獲取截圖的時間點和資料：
_3_12

支援設定截圖的大小和質量：
_3_13

支援新增文字水印：
_3_14

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

因為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.5、1、1.5、2四種倍速播放；而setspeed方法，可以隨意設定倍速播放。這個可能會有一些限制，移動端有的瀏覽器會不支援，比如android微信。

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

_3_15

三、其他輔助功能及工具

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

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

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

有的使用者只有畫面，沒有聲音。我們可以通過ffmpeg可以看下視訊的格式、流的情況、位元速率、幀率等。

最後，阿里雲播放器的所有情況都聚合在以下的網站上：
http://player.alicdn.com/detection.html，其中包括幫助文件、線上配置、診斷工具、產品demo等，大家可以登入瞭解詳情。

原文連結


相關文章