全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 阿里云办公 培训与认证 物联网
视频点播

Web播放器SDK

更新时间:2017-09-25 14:06:20

Aliplayer Web播放器SDK,同时支持Flash和Html5两种播放技术。

支持格式

  • Flash 模式:

    • 视频格式: mp4、flv、m3u8、rtmp、mp3
    • 视频编码: H.264
    • 音频编码: AAC、MP3
  • HTML5 模式:

    • 视频格式: mp4、m3u8
    • 视频编码: H.264
    • 音频编码: AAC

flash支持加密播放点播加密说明

m3u8格式播放依赖调用端浏览器支持情况:

  • iOS全系列支持,Android 4.0及以上版本支持;

  • PC端支持的浏览器:

    • Chrome for Desktop 34+
    • Firefox for Desktop 42+
    • IE11+ for Windows 8.1+
    • Edge for Windows 10+
    • Opera for Desktop
    • Safari for Mac 8+ (beta)

播放器功能说明

如何正确选择播放器

如何连续播放视频

如何在PC上播放hls视频

如何处理Flash跨域访问

如何启用H5的同层播放

清晰度切换的使用

诊断工具的使用

skinLayout属性的配置

H5自定义错误UI

直播出错恢复处理

常见问题

更多demo和说明请参见文档Aliplayer播放器

扫描体验

扫描体验

资源文件

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化:

  1. https://g.alicdn.com/de/prismplayer/2.0.1/aliplayer-min.js

这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术,也可以只引用对应技术的js文件,从而获得更小的文件体积:

Flash版本:

  1. https://g.alicdn.com/de/prismplayer/2.0.1/aliplayer-flash-min.js

Html5版本:

  1. https://g.alicdn.com/de/prismplayer/2.0.1/aliplayer-h5-min.js

如果您的使用场景需要用到html5播放器,请额外引用css文件:

  1. https://g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css

使用说明

Web播放器SDK,同时支持两种播放方式,即:

  • 方式一:通过播放地址播放;
  • 方式二:通过获取播放凭证完成视频播放;

默认和推荐使用方式一。详细描述请参见文档 播放SDK-使用说明

一个简单的使用实例

提供一个最简单的使用实例,初始化播放器,监听某个dom元素的点击事件来触发调用播放器的接口方法,同时对播放器暴露的事件进行监听。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  6. <title>用户测试用例</title>
  7. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css" />
  8. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.0.1/aliplayer-min.js"></script>
  9. </head>
  10. <body>
  11. <div class="prism-player" id="J_prismPlayer" style="position: absolute"></div>
  12. <script>
  13. var player = new Aliplayer({
  14. id: 'J_prismPlayer',
  15. width: '100%',
  16. autoplay: false,
  17. //支持播放地址播放,此播放优先级最高
  18. source : '播放url',
  19. //播放方式二:推荐
  20. vid : '1e067a2831b641db90d570b6480fbc40',
  21. playauth : '',
  22. cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
  23. });
  24. </script>
  25. </body>
  26. </html>

播放器配置属性

  • id,{String},播放器外层容器的dom元素id

  • source, {String}, 视频播放地址url

  • vid,{String},视频id。

  • playauth,{String},播放凭证。

  • height,{String},播放器高度,可形如’100%’或者’100px’

  • width,{String},播放器宽度,可形如’100%’或者’100px’

  • preload,{Boolean},播放器自动加载,目前仅h5可用

  • cover, {String}, 播放器默认封面图片,请填写正确的图片url地址,Flash播放器封面也需要开启允许跨域访问

  • isLive,{Boolean},播放内容是否为直播,直播时会禁止用户拖动进度条

  • autoplay,{Boolean},播放器是否自动播放,html5受浏览器限制,大多数情况下该配置会失效

  • rePlay,{Boolean},播放器自动循环播放

  • useH5Prism,{Boolean},指定使用H5播放器

  • useFlashPrism,{Boolean},指定使用Flash播放器

  • playsinline, {Boolean}, H5是否内置播放,有的Android浏览器不起作用

  • showBuffer,{Boolean},显示播放时缓冲图标,默认true

  • trackLog, {Boolean},是否需要进行用户行为日志打点,默认为true

  • skinRes,{Url},皮肤图片,不建议随意修改该字段,如要修改,请参照Web播放器皮肤定制

  • skinLayout,{Array | Boolean},功能组件布局配置,不传该字段使用默认布局,传false隐藏所有功能组件,功能与皮肤定制方法请看下一节

  • showBarTime,{String},控制栏自动隐藏时间(ms)

  • controlBarVisibility:,{String},控制控制面板的现实,默认为’click’,可选的值为:’click’、’hover’、’always’

  • waterMark,{url|pos|size|alpha},添加水印,目前仅支持flash,url:水印图片(jpg/png);pos:位置(TL/TR/BL/BR);size: logo宽度占播放器比例(0-1,默认0.2);alpha:透明度(0-1,默认1)。示例:waterMark:"logo.jpg|TL|0.15|0.5"

  • extraInfo,{“a_key”:”a_value”,”b_key”:”b_value”},类型为json串,定制性接口参数,目前支持

    1. "fullTitle":"测试页面" //全屏时显示视频标题(目前仅flash支持);
    2. "m3u8BufferLength":"30" //播放m3u8时加载缓存ts文件长度(目前仅flash支持),单位(秒);
    3. "liveStartTime":"2016/08/17 12:00:00", //直播开始时间,用于提示直播未开始(目前仅flash支持);
    4. "liveOverTime":"2016/08/17 14:00:00", //直播结束时间,用于提示直播结束(目前仅flash支持);
    5. "liveRetry":1, //直播流中断是否重试;
  • enableSystemMenu,Boolean,是否允许系统右键菜单显示,默认为false

  • format,Sting,指定播放地址格式,只有使用vid+plauth播放方式时支持,可选值为’mp4’和’m3u8’,默认为’mp4’

  • qualitySort,Sting,指定排序方式,只有使用vid+plauth播放方式时支持, ‘desc’表示按倒序排序(即:从大到小排序), ‘asc’表示按正序排序(即:从小到大排序),默认值为’asc’

  • x5_type,String,声明启用同层H5播放器,启用时设置的值为’h5’,具体参考同层播放

  • x5_fullscreen,Boolean,声明视频播放时是否进入到TBS的全屏模式,默认为false,具体参考同层播放

  • x5_orientation,Boolean,声明TBS播放器支持的方向,可选值:0:landscape 横屏,1:portraint竖屏,2:landscape | portrait跟随手机自动旋转,具体参考同层播放

播放器API

  • play(),播放视频

  • pause(),暂停视频

  • replay(),重播视频

  • seek(time),跳转到某个时刻进行播放,time的单位为秒

  • getCurrentTime(),获取当前的播放时刻,返回的单位为秒

  • getDuration(),获取视频总时长,返回的单位为秒

  • getVolume(),获取当前的音量,返回值为0-1的实数,ios和部分android会失效

  • setVolume(vol),设置音量,vol为0-1的实数,ios和部分android会失效

  • loadByUrl(url,time),直接播放视频urltime为可选值(单位秒)目前只支持同种格式(mp4/flv/m3u8)之间切换,暂不支持直播rtmp流切换

  • reloaduserPlayInfoAndVidRequestMts(vid,playauth),vid,{String},视频id;playauth,{String},播放凭证。目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换;注意参数顺序。

  • setPlayerSize(w,h),设置播放器大小,w,h可分别为400px像素或60%百分比,chrome浏览器下flash播放器分别不能小于397x297

播放器对外事件

  • ready,播放器初始化完毕可以播放视频时触发,播放器UI初始设置需要此事件后触发,避免UI被初始化所覆盖,播放器提供的方法需要在此事件发生后才可以调用

  • play,视频由暂停恢复为播放时触发

  • pause,视频暂停时触发

  • ended,当前视频播放完毕时触发

  • liveStreamStop,直播流中断时触发,m3u8/flv/rtmp在重试5次未成功后触发,提示上层流中断或需要重新加载视频

  • m3u8Retry,m3u8直播流中断后重试事件,每次断流只触发一次

  • hideBar,控制栏自动隐藏事件

  • waiting,数据缓冲事件

如果问题还未能解决,请联系 售后技术支持

本文导读目录