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" });

您可能感兴趣的

Editing the W3C HTML5 spec On 3 November, the Queen and Uncle Timbo (Sir Tim Berners-Lee to you) came round to Lawson Towers to threaten me with a punch in the face and a karat...
HTML5+CSS3静态页面项目-PayPaul的总结 学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少。师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛。于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习,查缺补漏知识...
Test websites for speed, mobile-friendliness, secu... blip Blip is an app for testing business websites for speed, mobile-friendliness, security and HTML5 compatibility. Find businesses around a locati...
Support multiple languages ​&am... I have a web dynamic project written using the JSP/Servlet framework, with client-side in HTML5/CSS and JavaScript. This means the server-side program...
迁移HTML5移动项目到PhoneGap MyEclipse开年钜惠 在线购买低至75折!立即开抢>> 【 MyEclipse最新版下载 】 一、创建一个新的PhoneGap应用程序项目 PhoneGap应用程序项目的结构与HTML5移动应用程序项目类似。还没安装MyEclipse?立即下载>&g...
云栖团队博客责编内容来自:云栖团队博客 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Aliplayer快速入门:资源引用、添加容器元素与初始化



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

使用声明 | 英豪名录