Aliplayer快速入门:资源引用、添加容器元素与初始化

资源引用

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播放器皮肤的钩子。

初始播放器

直接播放url实例

播放器可以通过初始化参数 source 传递视频的 url 直接进行播放

    
var videoUrl=""; //获取的视频地址 // 初始化播放器 var player = new Aliplayer({ id: "J_prismPlayer", // 容器id source: videoUrl, // 视频url width: "100%", // 播放器宽度 height: "400px" // 播放器高度 });

vid播放实例

通过设置视频vid和播放凭证playauth参数播放阿里云视频点播服务中托管的视频

如何接入点播服务

开通视频点播服务

配置点播加速域名

完成点播加速域名CNAME绑定

    //播放器容器
    
//播放器初始化代码 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" });

直播实例

播放器初始化参数 isLive 设置为 true 时为直播模式,直播源支持 HLS、 Http Flv(Flash only)、RTMP(Flash only)

    //播放器容器
    
//播放器初始化代码 var liveurl="http://live-url"; var player = new Aliplayer({ id: "J_prismPlayer", // 容器id source: liveurl,//直播流url isLive:true,//设置为true时为直播状态 width: "640px", height: "480px" });
云栖团队博客稿源:云栖团队博客 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » Aliplayer快速入门:资源引用、添加容器元素与初始化

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录