资源引用
version填入具体的版本号, 例如2.2.0
不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化:
http://g.alicdn.com/de/prismplayer/{version}/aliplayer-min.js
这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:
Flash版本:
http://g.alicdn.com/de/prismplayer/{version}/aliplayer-flash-min.js
Html5版本:
http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js
html5播放器,请额外引用css文件:
http://g.alicdn.com/de/prismplayer/{version}/skins/default/aliplayer-min.css
添加容器元素
请务必加上prism-player类名,此为h5播放器皮肤的钩子。
<div id="J_prismPlayer" class="prism-player"></div>
初始播放器
直接播放url实例
播放器可以通过初始化参数 source 传递视频的 url 直接进行播放
<body>
<div id="J_prismPlayer" class="prism-player"></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="http://live-url";
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: liveurl,//直播流url
isLive:true,//设置为true时为直播状态
width: "640px",
height: "480px"
});
</script>
</body>