原文地址：https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi
一、概念說明
1. playAuth：視頻播放的唯一憑證，每個播放憑證都綁定了用戶的身份標識，不同用戶的播放憑證不能互換，否則無法正常播放視頻。另外，播放憑證是有時效性的（默認100秒）。具體參數獲取方法查看文檔 獲取播放憑證。
2. 防盜鏈：通過判斷request請求頭的refer是否來源於本站的方式來決定視頻是否能被播放。（在點播或CDN控制台設置referer）具體設置方法查看防盜鏈設置。
二、使用流程
2.1 PlayAuth的播放流程
流程：用戶App獲取上傳憑證 -> 服務端下發上傳憑證 -> 用戶上傳視頻並獲取vid -> 服務端獲取播放憑證 -> 將播放憑證下發給客戶端 -> 完成視頻播放。
注意：AppServer為用戶App的服務端，需要用戶使用服務端API或SDK自行開發。
三、SDK集成
3.1 支持格式
阿里雲Web播放器SDK，同時支持Flash和Html5兩種播放技術。
- Flash 模式：
- 視頻格式： mp4、flv、m3u8、rtmp
- 視頻編碼： H.264
- 音頻編碼： AAC、MP3
- 音頻格式：MP3
flash支持加密播放點播加密說明
- HTML5 模式：
- 視頻格式： mp4、m3u8、flv
- 視頻編碼： H.264
- 音頻編碼： AAC
- 音頻格式： mp3
3.2 適配情況
- Flash 模式：
| mp4 | flv | m3u8 | rtmp | mp3 | |
|---|---|---|---|---|---|
| iOS | × | × | × | × | × |
| Android | × | × | × | × | × |
| Chrome | √ | √ | √ | √ | √ |
| Firefox | √ | √ | √ | √ | √ |
| IE | 8+ | 8+ | 8+ | 8+ | 8+ |
| Edge | √ | √ | √ | √ | √ |
| Opera | √ | √ | √ | √ | √ |
| Safari | √ | √ | √ | √ | √ |
- HTML5 模式：
| mp4 | flv | m3u8 | rtmp | mp3 | |
|---|---|---|---|---|---|
| iOS | √ | × | √ | × | √ |
| Android | √ | × | 4.0+ | × | √ |
| Chrome | √ | 34+ | 34+ | × | √ |
| Firefox | √ | 42+ | 42+ | × | √ |
| IE | IE9+ | 11+ | 11+ | × | IE9+ |
| Edge | √ | √ | √ | × | √ |
| Opera | √ | √ | √ | × | √ |
| Safari | √ | 8+ | 8+ | × | √ |
播放flv、m3u8視頻，PC端支持的瀏覽器，需要啟用允許跨域訪問
3.3 如何導入
不依賴於任何的前端js庫，只需要在頁面中引用如下js文件，就可以進行播放器的初始化：
https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js
這個文件同時包含了Flash和Html5跨終端自適應的邏輯。如果您只是想使用其中一種播放技術，也可以只引用對應技術的js文件，從而獲得更小的文件體積：
Flash版本:
https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-flash-min.js
Html5版本:
https://g.alicdn.com/de/prismplayer/2.4.0/aliplayer-h5-min.js
如果您的使用場景需要用到html5播放器，請額外引用css文件：
https://g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css
示例代碼如下：
<!DOCTYPE html><html><head><link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" /><script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script></head></html>
四、SDK使用
4.1 播放器簡單使用說明
初始化播放器，監聽某個dom元素的點擊事件來觸發調用播放器的接口方法，同時對播放器暴露的事件進行監聽。示例代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>用戶測試用例</title><link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" /><script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script></head><body><div class="prism-player" id="J_prismPlayer" style="position: absolute"></div><script>var player = new Aliplayer({id: 'J_prismPlayer',width: '100%',autoplay: false,//支持播放地址播放,此播放優先級最高source : '播放url',//播放方式二：點播用戶推薦vid : '1e067a2831b641db90d570b6480fbc40',playauth : '',cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',//播放方式三：僅MTS用戶使用vid : '1e067a2831b641db90d570b6480fbc40',accId: '',accSecret: '',stsToken: '',domainRegion: '',authInfo: ''},function(player){console.log('播放器創建好了。')});</script></body></html>
播放直播流時需要將
isLive設置為true。MTS播放的參數說明詳見：MTS播放說明
更多接口參考：web播放器接口文檔
4.2 連續播放
假如有多個視頻，在上一個視頻播放完畢時，自動播放下一個視頻，要怎么處理的呢？需要按使用的播放器類型和切換的地址格式，采用不同的實現方式。
4.2.1 直接地址方式
h5和flash的行為都是一致的，只需要訂閱’ended’， 在ended事件里，調用loadByUrl方法， 參數為下一個視頻的地址。
function endedHandle(){var newUrl = "";player.loadByUrl(newUrl);}player.on("ended", endedHandle);
4.2.2 vid+playauth播放方式
- h5在ended事件里調用replayByVidAndPlayAuth方法，參數為vid和新的playauth值。示例如下：
function endedHandle(){var newPlayAuth = "";player.replayByVidAndPlayAuth(vid,newPlayAuth);}player.on("ended", endedHandle);
- flash沒有提供切換vid和playauth的方法，需要銷毀，重新創建播放器。示例如下：
function endedHandle(){var newPlayAuth = "";player.dispose(); //銷毀$('#J_prismPlayer').empty();//id為html里指定的播放器的容器id//重新創建player = new Aliplayer({id: 'J_prismPlayer',autoplay: true,playsinline:true,vid: vid,playauth:newPlayAuth,useFlashPrism:true});}}player.on("ended", endedHandle);
注意：playauth的有效期只有100s， 調用replayByVidAndPlayAuth方法時，需要重新生產獲取playauth
4.2.3 地址協議不一樣切換地處理
如果原來播放的是mp4的視頻，現在新的地址是hls的視頻地址，這種情況只能重新創建播放器。示例如下：
function endedHandle(){var newUrl = ""; //新的播放地址player.dispose(); //銷毀$('#J_prismPlayer').empty(); //id為html里指定的播放器的容器id//重新創建player = new Aliplayer({id: 'J_prismPlayer',autoplay: true,playsinline:true,source:newUrl});}}player.on("ended", endedHandle);
4.3 清晰度切換
當前清晰度切換只有在使用阿里雲點播和轉碼服務時通過vid方式播放時會自動開啟。
默認時按低清晰度到高清晰度，選擇低清晰度的播放。
通過設置qualitySort屬性，啟用時升序還是降序：
-
desc 表示按倒序排序(即：從大到小排序)
-
asc 表示按正序排序(即：從小到大排序)
備注：
1）H5播放器可以通過設置format屬性選擇播放mp4或mp3播放格式，默認為mp4格式播放。
2）清晰度切換會記住用戶當前選擇的清晰度，下次重新打開播放視頻時，會優先選擇上次選擇的清晰度，沒有則按默認邏輯選擇低清晰度播放。
3）但用戶選擇的清晰度不能播放器時，會自動切換到下一個清晰度，並給提示，僅H5支持。
4.4 截圖
Aliplayer2.1.0以上版本支持視頻播放過程中的截圖功能，圖片類型為image/jpeg，返回當前播放時間、base64和二進制的圖片數據。
4.4.1 Flash開啟截圖功能
Flash通過snapshot屬性開啟，設置snapshot:true
4.4.2 H5開啟截圖功能
在skinLayout數組里添加snapshot UI
skinLayout:[{name:"bigPlayButton", align:"blabs", x:30, y:80},{name: "H5Loading", align: "cc"},{name: "errorDisplay", align: "tlabs", x: 0, y: 0},{name: "infoDisplay", align: "cc"},{name:"controlBar", align:"blabs", x:0, y:0,children: [{name: "progress", align: "tlabs", x: 0, y: 0},{name: "playButton", align: "tl", x: 15, y: 26},{name: "timeDisplay", align: "tl", x: 10, y: 24},{name: "fullScreenButton", align: "tr", x: 20, y: 25},{name:"streamButton", align:"tr",x:10, y:23},{name:"speedButton", align:"tr",x:10, y:23},{name: "volume", align: "tr", x: 20, y: 25},{name: "snapshot", align: "tr", x: 20, y: 25}]}]
h5播放flv視頻，在safari瀏覽器下不支持截圖功能，即使啟用了，截圖按鈕也不會出現
4.4.3 設置截圖的大小和質量
通過setSanpshotProperties(width,height,rate)方法設置截取圖片的大小和圖片質量, 大小默認為100%
player.setSanpshotProperties("300px","200px",0.9)
4.4.4 訂閱截圖事件
截圖完成時會觸發snapshoted事件，並返回截圖數據：
- time: 截圖的視頻時間點
- base64: 所截圖的base64串可以直接用於img顯示
- binary: 所截圖的二進制數據可以用於上傳
player.on("snapshoted", function(data) {console.log(data.paramData.time);console.log(data.paramData.base64);console.log(data.paramData.binary);});
4.4.5 H5添加允許跨域訪問的Header
H5的截圖是通過Canvas實現的，播放域名需添加允許跨域訪問的Header, 可以參考跨域訪問配置
4.4.6 H5截圖可以添加文字水印
可以設置snapshotWatermark屬性，包含屬性有：
| 名稱 | 說明 |
|---|---|
| left | 到左邊的距離 |
| top | 左上角的高度，會包含文字的高度 |
| text | 水印文字 |
| font | 設置文字格式,可以多個屬性一起設置，中間空格 font-style font-weight font-size font-family |
| strokeColor | 設置用於筆觸的顏色 |
| fillColor | 填充繪畫的顏色 |
snapshotWatermark:{left:"100",top:"100",text:"測試水印",font:"italic bold 48px 宋體",strokeColor:"red"fillColor:'green'}
4.5 其他功能使用
五、掃描體驗
掃描以下二維碼體驗阿里雲播放器Demo
六、注意事項
- 當H5播放視頻時瀏覽器控制台出現
No 'Access-Control-Allow-Origin' header is present on the requested resource.，請參考跨域訪問設置。 - 當Flash播放器出現CNAME或資源跨域訪問錯誤時，請參考跨域訪問設置。
- Android微信或QQ瀏覽器上播放視頻時,由於騰訊X5瀏覽器會挾持視頻自動全屏播放，請參考如何啟用H5的在微信中同層播放。