阿里雲web播放器

時間 2019-12-01

標籤阿里 web 播放欄目阿里巴巴简体版

原文原文鏈接

原文地址：https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoijavascript

1、概念說明

1. playAuth：視頻播放的惟一憑證，每一個播放憑證都綁定了用戶的身份標識，不一樣用戶的播放憑證不能互換，不然沒法正常播放視頻。另外，播放憑證是有時效性的（默認100秒）。具體參數獲取方法查看文檔獲取播放憑證。css

2. 防盜鏈：經過判斷request請求頭的refer是否來源於本站的方式來決定視頻是否能被播放。（在點播或CDN控制檯設置referer）具體設置方法查看防盜鏈設置。html

2、使用流程

2.1 PlayAuth的播放流程

流程：用戶App獲取上傳憑證 -> 服務端下發上傳憑證 -> 用戶上傳視頻並獲取vid -> 服務端獲取播放憑證 -> 將播放憑證下發給客戶端 -> 完成視頻播放。前端

注意：AppServer爲用戶App的服務端，須要用戶使用服務端API或SDK自行開發。html5

3、SDK集成

3.1 支持格式

阿里雲Web播放器SDK，同時支持Flash和Html5兩種播放技術。java

Flash 模式：
- 視頻格式： mp四、flv、m3u八、rtmp
- 視頻編碼： H.264
- 音頻編碼： AAC、MP3
- 音頻格式：MP3

flash支持加密播放點播加密說明web

HTML5 模式：
- 視頻格式： mp四、m3u八、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>

4、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 其餘功能使用

5、掃描體驗

掃描如下二維碼體驗阿里雲播放器Demo

6、注意事項

當H5播放視頻時瀏覽器控制檯出現No 'Access-Control-Allow-Origin' header is present on the requested resource.，請參考跨域訪問設置。
當Flash播放器出現CNAME或資源跨域訪問錯誤時，請參考跨域訪問設置。
Android微信或QQ瀏覽器上播放視頻時,因爲騰訊X5瀏覽器會挾持視頻自動全屏播放，請參考如何啓用H5的在微信中同層播放。