阿里云VOD(三)
一、视频播放器
参考文档:https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv5
1、视频播放器介绍
阿里云播放器SDK(ApsaraVideo Player SDK)是阿里视频服务的重要一环,除了支持点播和直播的基础播放功能外,深度融合视频云业务,如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。
2、集成视频播放器
- 创建aliyunplayer_pro文件夹
- 创建index.html文件
- 引入css文件
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" >
- 引入脚本文件并初始化视频播放器
<div class="prism-player" id="J_prismPlayer"></div>
<script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
//播放配置
},function(player){
console.log('播放器创建好了。')
});
</script>
3、播放地址播放
在Aliplayer的配置参数中添加如下属性
//播放方式一:支持播放地址播放,此播放优先级最高,此种方式不能播放加密视频
source : '你的视频播放地址',
启动浏览器运行,测试视频的播放
4、播放凭证播放(推荐)
阿里云播放器支持通过播放凭证自动换取播放地址进行播放,接入方式更为简单,且安全性更高。播放凭证默认时效为100秒(最大为3000秒)。
如果凭证过期则无法获取播放地址,需要重新获取凭证。
//播放方式二:加密视频和多数据源视频的播放
vid : '视频id',
playauth : '视频播放授权码',
encryptType:1, //当播放私有加密流时需要设置。
注意:播放凭证有过期时间,默认值:100秒 。取值范围:100~3000。
设置播放凭证的有效期:在获取播放凭证的测试用例中添加如下代码
request.setAuthInfoTimeout(200L);
二、功能和组件
功能展示:https://player.alicdn.com/aliplayer/presentation/index.html
1、视频封面
配置中添加cover属性设置
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
2、跑马灯
引入js脚本
<!-- 阿里云视频播放器组件 -->
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
播放器中添加配置项
components: [{
name: 'BulletScreenComponent', // 跑马灯组件
type: AliPlayerComponent.BulletScreenComponent,
/** 跑马灯组件三个参数 text, style, bulletPosition
* text: 跑马灯文字内容
* style: 跑马灯样式
* bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
*/
args: ['欢迎来到谷粒学院', { fontSize: '16px', color: '#00c1de' }, 'random']
}]
3、弹幕
首先定义弹幕组件的弹幕列表
/* 弹幕组件集成了 CommentCoreLibrary 框架, 更多 Api 请查看文档 https://github.com/jabbany/CommentCoreLibrary/ */
var danmukuList = [{
"mode": 1,
"text": "哈哈",
"stime": 1000,
"size": 25,
"color": 0xffffff
}, {
"mode": 1,
"text": "前方高能",
"stime": 2000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "灵魂歌手",
"stime": 30000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "顺手一划",
"stime": 10000,
"size": 25,
"color": 0x00c1de
}]
播放器中添加配置项
components: [{
name: 'AliplayerDanmuComponent', // 弹幕组件
type: AliPlayerComponent.AliplayerDanmuComponent,
args: [danmukuList] //列表:注意需要外层的[ ]
}]
4、旋转镜像
components: [{
name: 'RotateMirrorComponent',
type: AliPlayerComponent.RotateMirrorComponent
}]
阿里云VOD(三)的更多相关文章
- 阿里云VOD(一)
一.阿里云视频点播 1.功能介绍 视频点播(ApsaraVideo VoD,简称VoD)是集视频采集.编辑.上传.媒体资源管理.自动化转码处理(窄带高清TM).视频审核分析.分发加速于一体的一站式音视 ...
- 踩坑系列《十一》完美解决阿里云vod视频点播无法播放音频和视频点播控制台里的媒资库里面的视频无法播放
刚开始项目部署的时候,音频还是正常播放,后面直接报了 获取m3u8文件失败(manifestLoadError) 的错误,原因是 我的域名 xxx.com 这个域名没有解析到点播提供的CNAME上,所 ...
- 关于STM32F103+ESP8266+阿里云过程之设备状态更新至阿里云(三)
设备与阿里云完成发布订阅的功能,接下来就是将设备状态如温湿度,PM2.5值上报更新至阿里云. 1.查看Topic. 在阿里云平台上 设备->Topic列表中查看.在产品中也可以看到对应的Topi ...
- 阿里云VOD(二)
一.准备工作 1.设置不转码 测试之前设置默认"不转码",以节省开发成本 2.找到子账户的AccessKey ID 3.给子账户添加授权 AliyunVODFullAccess 4 ...
- 阿里云API网关(11)API的三种安全认证方式
网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...
- (三)air202连接阿里云上传静态数据
具体步骤跳转–合宙官网 air202luat二次开发设备接入阿里云(一) air202luat二次开发设备接入阿里云(二) air202luat二次开发设备接入阿里云(三) 可能遇到的问题 群文件中有 ...
- 阿里云视频点播之URL批量拉取上传(调整为多个视频上传)
项目引入阿里云视频点播PHP-SDK 背景:2021年乐视云的点播将停止提供服务,项目决定选择选用阿里云的视频的点播.在上线前,需要将之前的视频提前导入资源库,URLS方式拉取是比较方便的,对编辑同事 ...
- 阿里云服务器Linux CentOS安装配置(三)yum安装mysql
阿里云服务器Linux CentOS安装配置(三)yum安装mysql 1.执行yum安装mysql命令:yum -y install mysql-server mysql-devel 2.启动mys ...
- 云计算之路-阿里云上:消灭“黑色n秒”第三招——禁用网卡的TCP/IP Offload
程咬金有三板斧,我们有三招.在这篇博文中我们要出第三招,同时也意味着昨天在“希望的田野”上的第二招失败了. 前两招打头(CPU)不凑效,这一招要换一个部位,但依然要坚持攻击敌人最弱(最忙最累)部位的原 ...
随机推荐
- jQuery 的介绍
引入 jQuery 的原因 在用 js 写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. ...
- sqli-labs Less24 登录出现报错Cannot send session cache limiter....
问题描述 这是一道二次注入题,注册完成后,应该登录然后修改密码,但是登录的时候出现: Warning: session_start(): Cannot send session cache limit ...
- SpringBoot进阶教程(六十七)RateLimiter限流
在上一篇文章nginx限流配置中,我们介绍了如何使用nginx限流,这篇文章介绍另外一种限流方式---RateLimiter. v限流背景 在早期的计算机领域,限流技术(time limiting)被 ...
- 使用Canvas绘制分享海报
这几天接到一个需求,需要将一个邀请链接转换为一个带有二维码并且能够分享出去的海报图,网上找了很多的方法,也踩了不少的坑,希望大家遇到类似的需求能够少走弯路.. 具体效果图如下: 效果图 首先我采用了 ...
- iOS 自定义tabBarController(中间弧形)
效果图 1.在继承自UITabBarController的自定义controller中调用以下方法(LZCustomTabbar为自定义的tabbar) - (void)viewDidAppear:( ...
- C#中的深度学习(五):在ML.NET中使用预训练模型进行硬币识别
在本系列的最后,我们将介绍另一种方法,即利用一个预先训练好的CNN来解决我们一直在研究的硬币识别问题. 在这里,我们看一下转移学习,调整预定义的CNN,并使用Model Builder训练我们的硬币识 ...
- rtmp向IR601移植过程(无功能步骤,只有移植步骤)
1.main.c中添加头文件: #include "rtmp_sys.h" #include "log.h" #include "rtmp.h&quo ...
- 686. Repeated String Match判断字符串重复几次可以包含另外一个
public static int repeatedStringMatch(String A, String B) { //判断字符串a重复几次可以包含另外一个字符串b,就是不断叠加字符串a直到长度大 ...
- windows下用pip安装库,出现Command "python setup.py egg_info"错误信息
转自:http://blog.csdn.net/u011092188/article/details/64123561 解决方案: python -m pip install --upgrade -- ...
- 关于客户和供应商预制凭证添加WBS字段
客户和供应商的预制凭证的对应标准屏幕SAPLF0400301和SAPLF0400302并没有提供WBS字段,有的需求需要增强WBS字段到屏幕上,本文会介绍增强WBS字段的步骤,也请读者多多指教.为了不 ...