集成阿里云视频播放器
1、视频播放器介绍
阿里云播放器SDK(ApsaraVideo Player SDK)是阿里视频服务的重要一环,除了支持点播和直播的基础播放功能外,深度融合视频云业务,如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。
2、集成视频播放器
参考地址:https://help.aliyun.com/document_detail/125570.html
页面引入引入脚本文件和css文件
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>用户测试用例</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: true,
cover: '<your cover URL>',//可选公共参数。视频封面图片地址。用户自定义的可以被访问到的网络图片。本参数传入的URL优先级最高,会覆盖通过获取视频播放凭证接口获取的CoverURL。
// 播放方式一、播放地址播放。此方式播放优先级最高。
source : '<your play URL>',//播放方式一必选参数。可以是第三方直播或点播地址、阿里云直播服务中的播放地址,或阿里云点播服务中的播放地址。
// 播放方式二:推荐点播用户使用
vid : '<your video ID>',//播放方式二必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
playauth : '<your PlayAuth>',//播放方式二必选参数。参数值可通过调用GetVideoPlayAuth接口获取。
encryptType: 1, //使用播放方式二,当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
// 播放方式三:仅MPS用户使用
vid : '<your media ID in MPS>',//播放方式三必选参数。可以通过媒体处理控制台(媒体管理>媒体列表路径)查询。示例:1e067a2831b641db90d570b6480f****。
accId: '<your AccessKey ID>',//播放方式三必选参数。可通过RAM控制台(AccessKey管理页面)创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
accSecret: '<your AccessKey Secret>',//播放方式三必选参数。
stsToken: '<your STS token>',//播放方式三必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考视频播放。
domainRegion: '<your domain region>',//播放方式三必选参数。媒体资源所在的区域(cn-shanghai,cn-hangzhou等)。
authInfo: '<your auth info>',//播放方式三必选参数。authInfo需要提前生成。生成方式请参考视频播放。
// 播放方式四:使用STS方式播放。点播用户可在播放方式二或播放方式四中选择一个使用。
vid : '<your video ID>',//播放方式四必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
accessKeyId: '<your AccessKey ID>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
securityToken: '<your STS token>',//播放方式四必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
accessKeySecret: '<your AccessKey Secret>',//播放方式四必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
region: '<region of your video>', // 播放方式四必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
// 播放方式五:使用DRM方式播放。只有DRM加密视频能使用。
isDrm: true,
vid: '<your video ID>',//播放方式五必选参数。可以通过点播控制台(媒资库>音/视频路径)查询。示例:1e067a2831b641db90d570b6480f****。
accessKeyId: '<your AccessKey ID>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
securityToken: '<your STS token>',//播放方式五必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
accessKeySecret: '<your AccessKey Secret>',//播放方式五必选参数。可通过RAM访问控制控制台的AccessKey管理页面创建AccessKey,或者查看已有AccessKey Id的AccessKey Secret。
region: '<region of your video>', // 播放方式五必选参数。媒体资源所在的区域。如cn-shanghai、eu-central-1, ap-southeast-1等。
certId: '<your certificate ID>', // 仅苹果设备播放需要。用于请求苹果证书,可根据DRM加密的实现到视频点播或视频直播控制台获取。
},function(player){
console.log('The player is created.')
});
</script>
</body>
</html>
1.播放地址播放
在Aliplayer的配置参数中添加如下属性
source : '你的视频播放地址',
2.播放凭证播放(推荐)
里云播放器支持通过播放凭证自动换取播放地址进行播放,接入方式更为简单,且安全性更高。播放凭证默认时效为100秒(最大为3000秒),只能用于获取指定视频的播放地址,不能混用或重复使用。如果凭证过期则无法获取播放地址,需要重新获取凭证。凭证有有效时间取值范围:100~3000。
在Aliplayer的配置参数中添加如下属性
encryptType:'1',//如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项
vid : '视频id',
playauth : '视频授权码',
其他在线配置参考:http://player.alicdn.com/aliplayer/setting/setting.html
播放器属性参考地址:https://help.aliyun.com/document_detail/125572.htm?spm=a2c4g.11186623.0.0.131d5a36PPChOz#task-1997027
功能展示(播放组件):https://player.alicdn.com/aliplayer/presentation/index.html