271
Aliplayer快速入門：資源引用、添加容器元素與初始化
資源引用
version填入具體的版本號， 例如2.2.0
不依賴於任何的前端js庫，隻需要在頁麵中引用如下js文件，就可以進行播放器的初始化：
https://g.alicdn.com/de/prismplayer/{version}/aliplayer-min.js
這個文件同時包含了Flash和Html5跨終端自適應的邏輯。如果您隻是想使用其中一種播放技術，也可以隻引用對應技術的js文件，從而獲得更小的文件體積：
Flash版本:
https://g.alicdn.com/de/prismplayer/{version}/aliplayer-flash-min.js
Html5版本:
https://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js
html5播放器，請額外引用css文件：
https://g.alicdn.com/de/prismplayer/{version}/skins/default/aliplayer-min.css
添加容器元素
請務必加上prism-player類名，此為h5播放器皮膚的鉤子。
<div ></div>
初始播放器
直接播放url實例
播放器可以通過初始化參數 source 傳遞視頻的 url 直接進行播放
<body>
<div ></div> <!-- prism-player為h5播放器皮膚的鉤子類名，請務必加上 -->
<script>
var videoUrl=""; //獲取的視頻地址
// 初始化播放器
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: videoUrl, // 視頻url
width: "100%", // 播放器寬度
height: "400px" // 播放器高度
});
</script>
</body>
vid播放實例
通過設置視頻vid和播放憑證playauth參數播放阿裏雲視頻點播服務中托管的視頻
如何接入點播服務
<body>
//播放器容器
<div id='J_prismPlayer' class='prism-player'> <!-- prism-player為h5播放器皮膚的鉤子類名，請務必加上 -->
//播放器初始化代碼
<script>
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
vid : '1e067a2831b641db90d570b6480fbc40',//媒體轉碼服務的媒體Id
playauth : '',//播放鑒權 [playauth參照](https://help.aliyun.com/document_detail/52833.html?spm=5176.doc51236.6.627.5gm5gf)
width: "640px",
height: "480px"
});
</script>
</body>
直播實例
播放器初始化參數 isLive 設置為 true 時為直播模式,直播源支持 HLS、 Http Flv(Flash only)、RTMP(Flash only)
<body>
//播放器容器
<div id='J_prismPlayer' class='prism-player'> <!-- prism-player為h5播放器皮膚的鉤子類名，請務必加上 -->
//播放器初始化代碼
<script>
var liveurl="https://live-url";
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: liveurl,//直播流url
isLive:true,//設置為true時為直播狀態
width: "640px",
height: "480px"
});
</script>
</body>
最後更新：2017-11-13 18:04:15