全部产品
云市场

功能使用说明

更新时间:2019-09-02 19:37:03

注意事项

  • 当H5播放视频时浏览器控制台出现No 'Access-Control-Allow-Origin' header is present on the requested resource.,详情参见 跨域访问设置
  • 当Flash播放器出现CNAME或资源跨域访问错误时,详情参见 跨域访问设置
  • Android微信或QQ浏览器上播放视频时,由于腾讯X5浏览器会挟持视频自动全屏播放,详情参见 如何启用H5的在微信中同层播放

连续播放

假如有多个视频,在上一个视频播放完毕时,自动播放下一个视频,要怎么处理的呢?需要按使用的播放器类型和切换的地址格式,采用不同的实现方式。

直接地址方式

h5和flash的行为都是一致的,只需要订阅’ended’, 在ended事件里,调用loadByUrl方法, 参数为下一个视频的地址。

  1. function endedHandle()
  2. {
  3. var newUrl = "";
  4. player.loadByUrl(newUrl);
  5. }
  6. player.on("ended", endedHandle);

vid+playauth播放方式

  • h5在ended事件里调用replayByVidAndPlayAuth方法,参数为vid和新的playauth值。示例如下:
  1. function endedHandle()
  2. {
  3. var newPlayAuth = "";
  4. player.replayByVidAndPlayAuth(vid,newPlayAuth);
  5. }
  6. player.on("ended", endedHandle);
  • flash没有提供切换vid和playauth的方法,需要销毁,重新创建播放器。示例如下:
  1. function endedHandle()
  2. {
  3. var newPlayAuth = "";
  4. player.dispose(); //销毁
  5. $('#J_prismPlayer').empty();//id为html里指定的播放器的容器id
  6. //重新创建
  7. player = new Aliplayer({
  8. id: 'J_prismPlayer',
  9. autoplay: true,
  10. playsinline:true,
  11. vid: vid,
  12. playauth:newPlayAuth,
  13. useFlashPrism:true
  14. });
  15. }
  16. }
  17. player.on("ended", endedHandle);

注意:playauth的有效期只有100s, 调用replayByVidAndPlayAuth方法时,需要重新生产 获取playauth

地址协议不一样切换地处理

如果原来播放的是mp4的视频,现在新的地址是hls的视频地址,这种情况只能重新创建播放器。示例如下:

  1. function endedHandle()
  2. {
  3. var newUrl = ""; //新的播放地址
  4. player.dispose(); //销毁
  5. //重新创建
  6. setTimeout(function(){
  7. player = new Aliplayer({
  8. id: 'J_prismPlayer',
  9. autoplay: true,
  10. playsinline:true,
  11. source:newUrl
  12. });
  13. }
  14. },1000);
  15. }
  16. player.on("ended", endedHandle);

清晰度切换

当前清晰度切换只有在使用阿里云点播和转码服务时通过vid方式播放时会自动开启。

默认时按低清晰度到高清晰度,选择低清晰度的播放。

通过设置qualitySort属性,启用时升序还是降序:

  • desc表示按倒序排序(即:从大到小排序)。
  • asc表示按正序排序(即:从小到大排序)。

注意:

  • H5播放器可以通过设置format属性选择播放mp4或mp3播放格式,默认为mp4格式播放。

  • 清晰度切换会记住用户当前选择的清晰度,下次重新打开播放视频时,会优先选择上次选择的清晰度,没有则按默认逻辑选择低清晰度播放。

  • 但用户选择的清晰度不能播放器时,会自动切换到下一个清晰度,并给提示,仅H5支持。

截图

Aliplayer2.1.0以上版本支持视频播放过程中的截图功能,图片类型为image/jpeg,返回当前播放时间、base64和二进制的图片数据。

Flash开启截图功能

Flash通过snapshot属性开启,设置snapshot:true,RTMP流不支持截图。

H5开启截图功能

在skinLayout数组里添加snapshot UI。

  1. skinLayout:[
  2. {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3. {
  4. name: "H5Loading", align: "cc"
  5. },
  6. {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
  7. {name: "infoDisplay"},
  8. {name:"tooltip", align:"blabs",x: 0, y: 56},
  9. {name: "thumbnail"},
  10. {
  11. name: "controlBar", align: "blabs", x: 0, y: 0,
  12. children: [
  13. {name: "progress", align: "blabs", x: 0, y: 44},
  14. {name: "playButton", align: "tl", x: 15, y: 12},
  15. {name: "timeDisplay", align: "tl", x: 10, y: 7},
  16. {name: "fullScreenButton", align: "tr", x: 10, y: 12},
  17. {name:"subtitle", align:"tr",x:15, y:12},
  18. {name:"setting", align:"tr",x:15, y:12},
  19. {name: "volume", align: "tr", x: 15, y: 10},
  20. {name: "snapshot", align: "tr", x: 5, y: 12},
  21. ]
  22. }
  23. ]

H5截图是需要设置video的允许匿名跨域访问属性

  1. extraInfo:{
  2. crossOrigin:"anonymous"
  3. }

h5播放flv视频,在safari浏览器下不支持截图功能,即使启用了,截图按钮也不会出现。

设置截图的大小和质量

通过setSanpshotProperties(width,height,rate)方法设置截取图片的大小和图片质量, 大小默认为100%

  1. player.setSanpshotProperties(300,200,0.9)

订阅截图事件

截图完成时会触发snapshoted事件,并返回截图数据:

  • time:截图的视频时间点。
  • base64:所截图的base64串可以直接用于img显示。
  • binary:所截图的二进制数据可以用于上传。
  1. player.on("snapshoted", function(data) {
  2. console.log(data.paramData.time);
  3. console.log(data.paramData.base64);
  4. console.log(data.paramData.binary);
  5. });

H5添加允许跨域访问的Header

H5的截图是通过Canvas实现的,播放域名需添加允许跨域访问的Header,详情参见 跨域访问配置

H5截图可以添加文字水印

可以设置snapshotWatermark属性,包含属性有:

名称
说明
left
到左边的距离
top
左上角的高度,会包含文字的高度
text
水印文字
font
设置文字格式,可以多个属性一起设置,中间空格 font-style font-weight font-size font-family
strokeColor
设置用于笔触的颜色
fillColor
填充绘画的颜色
  1. snapshotWatermark:{
  2. left:"100",
  3. top:"100",
  4. text:"测试水印",
  5. font:"italic bold 48px 宋体",
  6. strokeColor:"red"
  7. fillColor:'green'
  8. }

H5直播时移

开通直播时移

  • 直播时移功能首先需要到阿里云直播服务里开通,详情参见 直播时移
  • 另外播放器开启时移功时需要设置如下属性:
名称 说明
isLive 值设置为true
liveTimeShiftUrl 时移信息查询URL怎么生成参考直播时移
liveStartTime 直播开始时间
liveOverTime 直播结束时间
liveShiftSource 直播时移hls地址,只有在source为flv直播流是需要设置

直播时移UI

直播时移的UI构成主要是可时移区域的进度条, 时间显示:

liveshift

时间区域从左到右分别为: 当前播放时间、直播结束时间、当前直播时间

调整直播结束时间

在播放过程中可以通过调用liveShiftSerivce.setLiveTimeRange方法调整直播开始/结束时间时,UI会做相应的变化:

  1. player.liveShiftSerivce.setLiveTimeRange(“”,’2018/01/04 20:00:00’)

flv直播和hls时移切换

由于延时的原因,直播希望在直播流用flv格式, 时移流用hls格式,Aliplayer支持这种模式: source属性指定flv直播地址, liveShiftSource属性指定hls的地址:

  1. {
  2. source:'http://localhost/live/test.flv',
  3. liveShiftSource:'http://localhost/live/test.m3u8',
  4. }

另外需要指定recreatePlayer函数回调,用于切换为flv直播时,重新创建播放器

  1. var player = "";
  2. var create = function(){
  3. player = new Aliplayer({
  4. source:'http://localhost/live/test.flv',
  5. liveShiftSource:'http://localhost/live/test.m3u8',
  6. recreatePlayer:function(){
  7. create();
  8. },
  9. .....
  10. },
  11. function(player){
  12. console.log('播放器已经创建');
  13. });
  14. }

旋转和镜像

旋转和镜像属性和方法说明

  • 提供两个属性videoHeight和videoWidth用于设置视频的宽度和高度,高度和宽度一般比容器的小,这样旋转和镜像时不会溢出到父容器外面,比如:
  1. width: '100%', //容器的大小
  2. height: '100%', //容器的大小
  3. videoHeight:"200px", //视频的高度大小

效果:

效果 | left

  • 方法说明
  1. 设置旋转:setRotate 参数为旋转角度, 正数为正时针旋转, 负数为逆时针旋转, e.g: setRotate(90)
  2. 获取旋转: getRotate
  3. 设置镜像: setImage 参数为镜像类型, 可选值为: horizon, vertical

浏览器适配

支持PC端和iOS端的浏览器, 在Android端,chrome、fixfore支持, 微信和大部分浏览器,由于视频被劫持播放,使用自带的播放器,所以不支持此功能

多清晰度播放

  • source通过json结构指定多路清晰度流的地址的地址,比如:
  1. source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'
  • key对应的text值
    1. "OD" : "原画"
    2. "FD" : "流畅"
    3. "LD":"标清"
    4. "SD" : "高清"
    5. "HD" : "超清"
    6. "2K" : "2K"
    7. "4K" : "4K"
    如果key值不在这个预定义的值里,将key值做为text值,直接显示在UI上

其他功能使用

进度条打点

如何定制皮肤

skinLayout属性的配置

关于跨域访问配置说明

如何启用H5的在微信中同层播放

直播出错恢复处理

诊断工具的使用

H5自定义错误UI

如何实现自定义组件

如何实现延迟播放