全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网
媒体转码

Web播放器

更新时间:2017-11-17 15:49:17

Aliplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制。

支持格式

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

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

  • HTML5 模式:
    • 视频格式: mp4、m3u8
    • 视频编码: H.264
    • 音频编码: AAC
    • 音频格式: mp3
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)
flv格式播放依赖调用端浏览器支持情况:
  • 移动端不支持;

  • PC端支持的浏览器,需要启用允许跨域访问

    • Chrome for Desktop 34+
    • Firefox for Desktop 42+
    • IE11+ for Windows 8.1+
    • Edge for Windows 10+
    • Opera for Desktop

播放器功能说明

如何正确选择播放器

如何连续播放视频

如何在PC上播放hls视频

如何处理Flash跨域访问

如何启用H5的同层播放

清晰度切换的使用

诊断工具的使用

skinLayout属性的配置

H5自定义错误UI

直播出错恢复处理

如何使用截图

如何使用延迟播放

如何实现自定义组件

如何在h5上播放flv视频

常见问题

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

扫码体验

扫描体验

资源文件

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

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

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

Flash版本:

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

Html5版本:

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

如果您的使用场景需要用到html5播放器,请额外引用css文件: https://g.alicdn.com/de/prismplayer/2.3.0/skins/default/aliplayer-min.css

一个简单的使用实例

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>测试页面</title>
  6. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.3.0/skins/default/aliplayer-min.css" />
  7. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.3.0/aliplayer-min.js"></script>
  8. </head>
  9. <body>
  10. <div id="J_prismPlayer" class="prism-player"></div>
  11. <!— prism-player为h5播放器皮肤的钩子类名,请务必加上 —>
  12. <button id="J_clickToPlay" type="button">播放</button>
  13. <script>
  14. // 初始化播放器
  15. var player = new Aliplayer({
  16. id: "J_prismPlayer", // 容器id
  17. source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4",// 视频地址
  18. autoplay: false, //自动播放:否
  19. width: "100%", // 播放器宽度
  20. height: "400px" // 播放器高度
  21. },function(player){
  22. console.log('播放器创建好了。')
  23. });
  24. var clickDom = document.getElementById("J_clickToPlay");
  25. clickDom.addEventListener("click", function(e) {
  26. // 调用播放器的play方法
  27. player.play();
  28. });
  29. // 监听播放器的pause事件
  30. player.on("pause", function() {
  31. alert("播放器暂停啦!");
  32. });
  33. </script>
  34. </body>

播放器配置属性

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

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

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

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

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

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

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

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

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

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

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

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

  • from,{String},来源标识,可自定义,主要用于日志记录数据收集(建议用户填入自己业务名称,便于后续播放量统计)。

  • 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跟随手机自动旋转,具体参考同层播放

  • autoPlayDelay,Number,延迟播放时间,单位为秒,具体参考延迟播放

  • autoPlayDelayDisplayText,String,延迟播放提示文本,具体参考延迟播放

  • language, String, 国际化,默认为’zh-cn’, 如果未设置,则采用浏览器语言,可选值为’zh-cn’ or ‘en-us’

  • snapshot, Boolean, flash启用截图功能, 可参考如何使用截图

  • snapshotWatermark,Object,H5设置截图水印
    可参考如何使用截图

  • useHlsPluginForSafari,Boolean,Safari浏览器可以启用Hls插件播放,Safari 11除外

  • enableStashBufferForFlv,Boolean,H5播放flv时,设置是否启用播放缓存,只在直播下起作用

  • stashInitialSizeForFlv,Number,H5播放flv时,初始缓存大小,只在直播下起作用

播放器定制

Aliplayer使用skinResskinLayout两个配置项实现播放器功能与皮肤的定制。

skinRes提供了播放器使用的皮肤图片地址,我们在实现层面上对皮肤图片进行预处理,从而提取出各个功能组件的ui皮肤和尺寸。

skinLayout的配置方式一般如下:

  1. skinLayout: [
  2. {
  3. "name":"bigPlayButton",
  4. "align":"blabs",
  5. "x":30,
  6. "y":80
  7. },
  8. {
  9. "name":"controlBar",
  10. "align":"blabs",
  11. "x":0,
  12. "y":0,
  13. "children":[
  14. {
  15. "name":"progress",
  16. "align":"tlabs",
  17. "x":0,
  18. "y":0
  19. }
  20. ]
  21. }
  22. ]

skinLayout中的每一个元素表示一个功能组件的配置,播放器只会初始化进行了配置的功能组件。每个功能组件有以下配置项:

  • name,{String},功能组件的名称,目前可用的组件列表请见下文

  • align,{String},组件相对于父级组件的对齐方式,可选项有:

    • 'cc',相对于父组件绝对居中

    • 'tl',相对于父组件左上对齐,受同级组件的占位影响,以组件的相对位置左上角作为偏移原点,可类比于css中的float: left

    • 'tr',相对于父组件右上对齐,受同级组件的占位影响,以组件的相对位置右上角作为偏移原点,可类比于css中的float: right

    • 'tlabs',相对于父组件左上绝对对齐,不受同级组件的占位影响,以父组件左上角作为偏移原点

    • 'trabs',相对于父组件右上绝对对齐,不受同级组件的占位影响,以父组件右上角作为偏移原点

    • 'blabs',相对于父组件左下绝对对齐,不受同级组件的占位影响,以父组件左下角作为偏移原点

    • 'brabs',相对于父组件右下绝对对齐,不受同级组件的占位影响,以父组件右下角作为偏移原点

  • x,{Number},水平方向偏移量,偏移原点参考align的说明,cc时无效

  • y,{Number},垂直方向偏移量,偏移原点参考align的说明,cc时无效

  • children,{Array},组件的子组件列表

播放器功能组件

  • bigPlayButton,大播放按钮

  • controlBar,控制面板

  • progress,播放进度条

  • playButton,播放按钮,默认从属于controlBar

  • timeDisplay,播放时间,默认从属于controlBar

  • fullScreenButton,全屏按钮,默认从属于controlBar

  • setButton,设置按钮,默认从属于controlBar,只有flash生效;为保持播放器界面整洁,默认不显示,如需打开,需要在设置皮肤时,在controlBar下添加setButton的配置

  • streamButton,清晰度选择,默认从属于controlBar,只有flash且有多清晰度输入时才生效

  • volume,音量控制,默认从属于controlBar

  • fullControlBar,全屏顶部面板,只有flash生效

  • fullTitle,视频标题,默认从属于fullControlBar,只有flash生效

  • fullNormalScreenButton,取消全屏按钮,默认从属于fullControlBar,只有flash生效

  • fullTimeDisplay,全屏下当前时间,默认从属于fullControlBar,只有flash生效

  • fullZoom,屏幕缩放,默认从属于fullControlBar,只有flash生效

skinLayout支持树形的嵌套定义,从实现上支持各个组件的嵌套关系和顺序调整。但我们约定controlBarfullControlBar才允许二级嵌套。同时,在完全开放定制功能之前,我们也不建议您过度修改skinLayout,当前版本我们仅对外提供功能组件的显示隐藏定制。

播放器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流切换

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

  • setSpeed,speed, 设置倍速播放,移动端可能会失效,比如android 微信

  • setSanpshotProperties,参数:width 宽度 ,height 高度 ,rate 截图质量,设置截图参数,可参考如何使用截图

播放器对外事件

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

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

  • pause,视频暂停时触发

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

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

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

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

  • waiting,数据缓冲事件

  • snapshoted,截图完成时间,可参考如何使用截图

  • requestFullScreen,全屏事件

  • cancelFullScreen,取消全屏事件

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

本文导读目录