原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi

一、概念说明

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

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

二、使用流程

2.1 PlayAuth的播放流程

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

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

三、SDK集成

3.1 支持格式

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

  • Flash 模式:

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

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

  • 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
  • HTML5 模式:
  mp4 flv m3u8 rtmp mp3
iOS × ×
Android × 4.0+ ×
Chrome 34+ 34+ ×
Firefox 42+ 42+ ×
IE IE9+ 11+ 11+ × IE9+
Edge ×
Opera ×
Safari 8+ 8+ ×

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

3.3 如何导入

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

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

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

Flash版本:

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

Html5版本:

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

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

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

示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" />
  5. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.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.4.0/skins/default/aliplayer-min.css" />
  8. <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.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. //播放方式三:仅MTS用户使用
  24. vid : '1e067a2831b641db90d570b6480fbc40',
  25. accId: '',
  26. accSecret: '',
  27. stsToken: '',
  28. domainRegion: '',
  29. authInfo: ''
  30. },function(player){
  31. console.log('播放器创建好了。')
  32. });
  33. </script>
  34. </body>
  35. </html>

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

MTS播放的参数说明详见:MTS播放说明

更多接口参考: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(); //id为html里指定的播放器的容器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 表示按正序排序(即:从小到大排序)

备注:

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

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

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

4.4 截图

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

4.4.1 Flash开启截图功能

Flash通过snapshot属性开启,设置snapshot:true

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播放flv视频,在safari浏览器下不支持截图功能,即使启用了,截图按钮也不会出现

4.4.3 设置截图的大小和质量

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

  1. player.setSanpshotProperties("300px","200px",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 其他功能使用

如何定制皮肤

skinLayout属性的配置

关于跨域访问配置说明

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

直播出错恢复处理

诊断工具的使用

H5自定义错误UI

如何实现自定义组件

如何实现延迟播放

五、扫描体验

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

六、注意事项

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

阿里云web播放器的更多相关文章

  1. 阿里云Prismplayer-Web播放器的使用

    Prismplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制.其在线使用文档地址为:https://help.aliyun.com/d ...

  2. Web播放器

    web视频播放器的使用及遇到的问题记录 TcPlayer播放器(腾讯Web超级播放器) https://cloud.tencent.com/document/product/881/20207 Ste ...

  3. 雷火神山直播超两亿,Web播放器事件监听是怎么实现的?

    Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...

  4. [阿里云部署] Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器

    部署地址:123.56.7.181 Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器 这个标题就比之前的"ECS服务器配置Web环境的全过程及参考资料&qu ...

  5. 阿里云web环境安装

    阿里云web环境一键安装 云盘:链接: https://pan.baidu.com/s/1i4LPwtZ 密码: caph 包含安装包及PDF教程

  6. 阿里云Web应用防火墙采用规则引擎、语义分析和深度学习引擎相结合的方式防护Web攻击

    深度学习引擎最佳实践 {#concept_1113021 .concept} 阿里云Web应用防火墙采用多种Web攻击检测引擎组合的方式为您的网站提供全面防护.Web应用防火墙采用规则引擎.语义分析和 ...

  7. 百度云BDCloudVideoView播放器的初体验

    今天试用了一下百度云BDCloudVideoView,记录下遇到的坑. 前面一切还好,按照他的要求各种导入,然后开始码代码,起实就是抄例子.然后各种坑开始了 下面这个你看名称能知道它是个啥吗? mVi ...

  8. SWF Web播放器

    <HTML> <HEAD> <!-- saved from url=(0013)about:internet --> <TITLE> Untitled. ...

  9. web 直播&即时聊天------阿里云、融云(三)

    经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了... 一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑 ...

随机推荐

  1. [LOJ2553]暴力写挂

    锟题x2 以下用$a\rightarrow b$表示端点为$a,b$的链 把式子写成$(h_1(x)+h_1(y)-h_1(lca))-h_2(lca')$,第一部分就是$x\rightarrow r ...

  2. 【枚举】【尺取法】hdu6103 Kirinriki

    两个等长字符串A,B的距离被定义为 给你一个字符串,问你对于所有长度相等的不相交子串对,其距离不超过m的前提下,最长的长度是多少. 枚举对称轴,两侧先贪心地扩展到最长,超过m之后,再缩短靠近对称轴的端 ...

  3. 监视scrollview是否滚动到底

    //监视scrollview是否滚动到底 - (void)scrollViewDidScroll:(UIScrollView *)scrollView{ [refreshHeaderViewegoRe ...

  4. JDK源码学习笔记——Object

    一.源码解析 public class Object { /** * 一个本地方法,具体是用C(C++)在DLL中实现的,然后通过JNI调用 */ private static native void ...

  5. Generator函数(三)

    Generator.prototype.return() 1.Generator函数返回的遍历器对象还有一个return方法,可以返回给定的值,并终结Generator函数的遍历. function* ...

  6. Android SO(动态链接库)UPX加固指南

    前言 随着移动互联网的爆发性增长,人们对移动应用的需求变得越来越复杂,企业在带给用户众多便利和享受的同时,却容易忽视应用自身的安全性问题,一旦遭受攻击,就会给企业和用户的经济或声誉带来影响.本文主要是 ...

  7. [Apache手册]Linux环境下配置Apache运行cgi

    CGI动态页面 相关模块 相关指令 mod_alias mod_cgi AddHandler Options ScriptAlias CGI(公共网关接口)定义了web服务器与外部内容生成程序之间交互 ...

  8. [Linux] Linux smaps接口文件结构

    在Linux内核 2.6.16中引入了一个系统内存接口特性,这个接口位于/proc/$pid/目录下的smaps文件中 ,一看内容发现是进程内存映像信息,比同一目录下的maps文件更详细些. 400d ...

  9. attribute用法

    attribute 用法 摘要: 在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了_ ...

  10. 理解PHP的变量,值与引用的关系

    --- title: 理解PHP的变量,值与引用的关系 createdDate: 2015-03-11 category: php --- PHP的变量与C++中的变量是两种截然不容的概念.如果没有理 ...