全部产品
弹性计算 会员服务 网络 安全 移动云 数加·大数据分析及展现 数加·大数据应用 管理与监控 云通信 阿里云办公 培训与认证 智能硬件
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 更多
视频点播

Web播放器

更新时间:2018-06-19 12:57:32

一、概念说明

1. playAuth:视频播放的唯一凭证,每个播放凭证都绑定了用户的身份标识,不同用户的播放凭证不能互换,否则无法正常播放视频。另外,播放凭证是有时效性的(默认100秒)。具体参数获取方法,参见 获取播放凭证

2. RAM和STS:RAM和STS是阿里云提供的权限管理系统。RAM主要的作用是控制账号系统的权限。通过使用RAM可以将在主账号的权限范围内创建子用户,给不同的子用户分配不同的权限从而达到授权管理的目的。STS是一个安全凭证(Token)的管理系统,用来授予临时的访问权限,这样就可以通过STS来完成对于临时用户的访问授权。详情参见 STS介绍

3. 临时AccessKeyId、AccessKeySecret和SecurityToken:开启RAM授权,并通过STS授权系统提供的OpenAPI或SDK获取的AccessKeyId、AccessKeySecret和SecurityToken,用于播放(V2.5.0版起推荐使用STS的播放方式)。详情参见 STS SDK参考

4. 防盗链:通过判断request请求头的refer是否来源于本站的方式来决定视频是否能被播放。(在点播或CDN控制台设置referer)具体设置方法,参见 防盗链设置

5. 直播时移:时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址;对于常规的HLS直播而言,TS分片地址及相应的TS文件并不持久化保存,导致当前时间之前的直播视频内容无法回溯;而对于开通了时移功能的HLS直播而言,TS分片地址及相应TS文件会分别在数据库和OSS中持久化保存最长15天,使得回溯从直播开始时间到当前时间之间的视频内容成为可能。详情参见 直播时移。播放器开启时移功时需要设置isLive为true和liveTimeShiftUrl属性。

5. 同层播放:在Android手机上浏览器(比如:微信)播放视频时,浏览器会劫持视频的播放,使用的是浏览器自带的播放器弹出全屏播放视频,而且会覆盖Dom元素,对于这部分案例没有有效的办法解决,但是由于X5内核的浏览器(微信、QQ浏览器)提供了一些属性可以解决不劫持视频的播放和覆盖Dom元素,腾讯命名为同层播放,只针对Android的X5内核浏览器。但是由于播放器时X5浏览器还是还弹出一层覆盖播放, 上部还是会保留退出和分享按钮,下部会有黑边, 布局可能会和原来的界面有点不一样,这就需要用户通过订阅x5requestFullScreen和x5cancelFullScreen事件微调布局。详见:微信同层播放

二、使用流程

2.1 STS的播放流程

流程:用户App获取STS凭证 > 服务端下发STS凭证 > 用户上传视频并获取vid > 服务端获取STS凭证 > 将STS凭证下发给客户端 > 完成视频播放。

sts

注意:AppServer为用户App的服务端,需要用户使用服务端API或SDK自行开发。

2.2 PlayAuth的播放流程

流程:用户App获取上传凭证 > 服务端下发上传凭证 > 用户上传视频并获取vid > 服务端获取播放凭证 > 将播放凭证下发给客户端 > 完成视频播放。

playAuth播放

注意:AppServer为用户App的服务端,需要用户使用服务端API或SDK自行开发。

三、SDK集成

3.1 支持格式

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

  • Flash 模式:

    • 视频格式:mp4、flv、m3u8、rtmp

    • 视频编码:H.264

    • 音频编码:AAC、MP3

    • 音频格式:MP3

    仅flash支持加密播放,点播用户参见 点播加密说明,MPS用户参见 MPS播放说明
  • HTML5 模式:

    • 视频格式:mp4、m3u8、flv

    • 视频编码:H.264

    • 音频编码:AAC

    • 音频格式:mp3

3.2 适配情况

  • Flash 模式:
mp4 flv m3u8 rtmp mp3
iOS × × × × ×
Android × × × × ×
Chrome
Firefox
IE 8+ 8+ 8+ 8+ 8+
Edge
Opera
Safari

移动端不支持Flash播放器

使用flash播放器,当要支持IE8浏览器时,需要在页面添加json.min.js的引用。

  1. https://g.alicdn.com/de/prismplayer/2.7.0/json/json.min.js
  • HTML5 模式:
mp4 flv m3u8 rtmp mp3
iOS × ×
Android × 4.0+ ×
Chrome 34+ 34+ ×
Firefox 42+ 42+ ×
IE IE9+ 11+
for Windows 8.1+
11+
for Windows 10+
× IE9+
Edge ×
Opera ×
Safari 8+ 8+ ×

h5播放器在移动端不支持flv和rtmp的播放

播放flv、m3u8视频,PC端支持的浏览器,需要启用 允许跨域访问

PC端chrome浏览器在移动模拟器下,播放m3u8需要安装Native HLS Playback Chrome插件

  • 已知适配问题
  1. 移动端浏览器视频会默认全屏播放

    移动端浏览器默认是会弹出全屏播放,针对不同的情况需要不同的设置:

    iOS App: App内实现内联播放需要设置Aliplayer提供的playsinline 属性为true,同时WebView需要设置allowsInlineMediaPlayback,这样页面在 App里打开时视频就能以非全屏模式(即内联的方式)播放

    Safari: iOS10 以下版本的Safari是无法禁止视频自动全屏播放的

    Android: Android系统会有不同的定制版本,每个版本对H5 video标签的实现都有差别,,所以在Android上播放视频所展现的一致性,相比iOS要差很多,也可以设置playsinline属性为true,只需要终端浏览器支持内联播放,对于X5内核浏览器(微信,QQ浏览器)可以启用同层播放,达到类内联播放的目的。

  2. 移动端设置autolay=true无效,不会自动播放

    H5Video自动播放视频只有两个办法,通过设置autoplay属性或者调用play()方法,但是现实是在移动端中视频自动播放一直是被禁止的,目前通用的办法是通过用户手动触发播放(例如 监听用户的点击事件并调用 play()方法,但是不排出一些特性的浏览器和webview允许自动播放器,特别是在Android上

  3. MacOS High Sierra Safari 11以上的浏览器限制自动播放

  4. 音量调节功能(getVolumn和setVolumn)iOS和部分Android会失效

  5. 倍速播放功能,部分移动端浏览器不支持设置倍速,功能会失效,比如android微信

  6. 截图功能在移动端部分机型由于安全问题,会截图失败,比如Android8.4.1,或者浏览器本身问题,截的图片是全黑的, 可以通过截图检测工具验证浏览器的支持情况

3.3 如何导入

不依赖于任何的前端js库,只需要在页面中引用如下js文件,就可以进行播放器的初始化,如果出现文本乱码,可以添加script引用标签添加charset属性,值为”utf-8”比如:charset=”utf-8”:

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

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

Flash版本:

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

Html5版本:

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

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

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

示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.0/skins/default/aliplayer-min.css" />
  5. <script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.0/aliplayer-min.js"></script>
  6. </head>
  7. </html>

四、SDK使用

4.1 播放器简单使用说明

初始化播放器,监听某个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.7.0/skins/default/aliplayer-min.css" />
  8. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.0/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. //播放方式三:仅MPS用户使用
  24. vid : '1e067a2831b641db90d570b6480fbc40',
  25. accId: '',
  26. accSecret: '',
  27. stsToken: '',
  28. domainRegion: '',
  29. authInfo: '',
  30. //播放方式四:使用STS方式播放
  31. vid : '1e067a2831b641db90d570b6480fbc40',
  32. accessKeyId: '',
  33. securityToken: '',
  34. accessKeySecret: ''
  35. },function(player){
  36. console.log('播放器创建好了。')
  37. });
  38. </script>
  39. </body>
  40. </html>

播放直播流时需要将isLive设置为true

MPS播放的参数说明参见 MPS播放说明

更多接口参见 web播放器接口文档

4.2 连续播放

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

4.2.1 直接地址方式

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

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

4.2.2 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

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

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

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

4.3 清晰度切换

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

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

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

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

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

注意:

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

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

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

4.4 截图

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

4.4.1 Flash开启截图功能

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

4.4.2 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", align: "cc"},
  8. {
  9. name:"controlBar", align:"blabs", x:0, y:0,
  10. children: [
  11. {name: "progress", align: "tlabs", x: 0, y: 0},
  12. {name: "playButton", align: "tl", x: 15, y: 26},
  13. {name: "timeDisplay", align: "tl", x: 10, y: 24},
  14. {name: "fullScreenButton", align: "tr", x: 20, y: 25},
  15. {name:"streamButton", align:"tr",x:10, y:23},
  16. {name:"speedButton", align:"tr",x:10, y:23},
  17. {name: "volume", align: "tr", x: 20, y: 25},
  18. {name: "snapshot", align: "tr", x: 20, y: 25}
  19. ]
  20. }
  21. ]

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

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

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

4.4.3 设置截图的大小和质量

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

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

4.4.4 订阅截图事件

截图完成时会触发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. });

4.4.5 H5添加允许跨域访问的Header

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

4.4.6 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. }

4.5 H5直播时移

4.5.1 开通直播时移

  • 直播时移功能首先需要到阿里云直播服务里开通,详情参见 直播时移

  • 另外播放器开启时移功时需要设置如下属性:

名称 说明
isLive 值设置为true
liveTimeShiftUrl 时移信息查询ULRL怎么生成参考直播时移
liveStartTime 直播开始时间
liveOverTime 直播结束时间

4.5.2 直播时移UI

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

 liveshift

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

4.5.3 调整直播结束时间

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

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

4.6 旋转和镜像

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

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

效果:

效果

  • 方法说明
  1. 设置旋转:setRotate 参数为旋转角度, 正数为正时针旋转, 负数为逆时针旋转, e.g: setRotate(90)

  2. 获取旋转: getRotate

  3. 设置镜像: setImage 参数为镜像类型, 可选值为: horizon, vertical

4.6.2 浏览器适配

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

4.7 多清晰度播放

  • 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上

五、其他功能使用

5.1 如何定制皮肤

5.2 skinLayout属性的配置

5.3 关于跨域访问配置说明

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

5.5 直播出错恢复处理

5.6 诊断工具的使用

5.7 H5自定义错误UI

5.8 如何实现自定义组件

5.9 如何实现延迟播放

六、扫描体验

扫描以下二维码体验阿里云播放器Demo。

扫描体验

七、注意事项

  1. 当H5播放视频时浏览器控制台出现No 'Access-Control-Allow-Origin' header is present on the requested resource.,详情参见 跨域访问设置

  2. 当Flash播放器出现CNAME或资源跨域访问错误时,详情参见 跨域访问设置

  3. Android微信或QQ浏览器上播放视频时,由于腾讯X5浏览器会挟持视频自动全屏播放,详情参见 如何启用H5的在微信中同层播放

本文导读目录