阿里云视频播放
- 一、概述
- 二、两种播放方式测试
- 2.1 第一种：播放地址播放
- 2.2 第二种：播放凭证播放(推荐)
- 2.2.1 获取视频播放凭证
- 2.2.2 前端完整代码：
- 2.2.3 相关依赖
- 三、总结
一、概述
阿里云播放器SDK（Aliplayer SDK）是阿里视频云端到云到端服务的重要一环，支持视频加密播放、清晰度切换、直播时移等业务场景，本文说明并提供了Web端播放器的在线配置、功能展示、微信小程序等Demo体验。为您提供简单、快速、安全、稳定的视频播放服务。
Aliplayer SDK提供了在线配置功能，同时生成可运行的代码，方便用户集成播放器，访问地址请参见在线配置。
阿里云播放器SDK文档地址：https://help.aliyun.com/document_detail/125547.html
二、两种播放方式测试
2.1 第一种：播放地址播放
引入脚本和css文件
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
初始化视频播放器
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: false,
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
//播放配置
},function(player){
console.log('播放器创建好了。')
});
</script>
</body>
加入视频播放地址，在上面的配置再加一项：
//播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
source : '你的视频播放地址',
这里我用我给阿里云上传的视频测试，将下面的图片中视频地址赋值给上面的source配置项
完整测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/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: false,
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
//播放配置
source:'https://outin-ff4c752a3f7f11eca76a00163e1a625e.oss-cn-shanghai.aliyuncs.com/sv/4190b848-17d338d94e3/4190b848-17d338d94e3.mp4?Expires=1637306353&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=XuRTYd2R2aXgoBNzLOWX7Xx9Aps%3D'
},function(player){
console.log('播放器创建好了。')
});
</script>
</body>
</html>
访问测试：
2.2 第二种：播放凭证播放(推荐)
推荐使用播放凭证方式实现视频播放，因为如果视频加密的话只能用这种方式，上面的播放地址方式是不能用的。
阿里云播放器支持通过播放凭证自动换取播放地址进行播放，接入方式更为简单，且安全性更高。播放凭证默认时效为100秒（最大为3000秒），只能用于获取指定视频的播放地址，不能混用或重复使用。如果凭证过期则无法获取播放地址，需要重新获取凭证。
加入配置：
encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
vid : '视频id',
playauth : '视频授权码',
注意：播放凭证有过期时间，默认值：100秒 。取值范围：100~3000。
2.2.1 获取视频播放凭证
这里需要单独写个controller去获取阿里云中视频的播放凭证
单独写个controller,根据视频id获取阿里云视频的播放凭证
//根据视频id获取视频的播放凭证
@ApiOperation("根据视频id获取视频的播放凭证")
@GetMapping("getPlayAuth/{id}")
public R getPlayAuth(@PathVariable String id){
try{
//创建初始化对象
DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
//创建获取视频凭证的request和response
GetVideoPlayAuthRequest request=new GetVideoPlayAuthRequest();
//向request设置视频id
request.setVideoId(id);
//调用初始化对象的方法得到视频凭证
GetVideoPlayAuthResponse response = client.getAcsResponse(request);
String playAuth=response.getPlayAuth();
return R.ok()
.data("playAuth",playAuth);
}catch (Exception e){
throw new GuliException(20001,"获取凭证失败");
}
}
视频id可以去阿里云中查看
2.2.2 前端完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/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: false,
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
//播放配置
encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
vid : '49c422c27a6c43418b4edde88638cec0',
playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWFBSGRuTTM2eGp3bytLVEhUVDNYcG1kUGwydFpEWWtUejJJSHBOZTNocUIrMGZzUGt3bEdsVTZmZ2Nsck1xRmNBZUdSV2FONXNodGNVR3IxLzRKcExGc3QySjZyOEpqc1UyamZsQ3NGbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRTF4Rm11Q2QvWDRvQXlhTzF2NkdwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVWRKakRhL0wvWllMbE1jS2c4NFdlaVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHhBS0RqK2FxMUdVR29BQktyOHRkb1Q1OVlxVTVrbXVxRFY2T1hLc3N4UEpJZks3MmlFM2hpWWt1SHpPS1N2Wnp3emNaMkxZbVNTQ2RXd1VjU2FIOWpVc05OSy9BQ0NmZmRUVlluMnQxakl3N3lXeHdicWVDNTE3Tms1Tk0yTk45T0hPNjcrWkxDYmhPcHpYdjZiSkFJWU92ZnArVkxKVnlJSTM4aFVpYWFzZTFMbVpaOFZkSWZXQisrYz0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJCUHFObWZZdmZIZVhWT2lraWpBRmpMU2tQemx0bjhkUzVPMWdPbXphdnZCcXNzK3dVRm1WSnQzUlo5Ylc3UEo2XCIsXCJDYWxsZXJcIjpcIlFDWGZMWlBoR1N2QmErcEhIOUtUSTJNazJTd1NoRGR5RUZmaktoVFZwQms9XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIxLTExLTE5VDA3OjE4OjQ2WlwiLFwiTWVkaWFJZFwiOlwiNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzBcIixcIlNpZ25hdHVyZVwiOlwia20yZnpYa3ZiQkQwa09MeXJMTGE4R056YUpvPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzAiLCJUaXRsZSI6IjYgLSBXaGF0IElmIEkgV2FudCB0byBNb3ZlIEZhc3RlciIsIkNvdmVyVVJMIjoiaHR0cDovL291dGluLWZmNGM3NTJhM2Y3ZjExZWNhNzZhMDAxNjNlMWE2MjVlLm9zcy1jbi1zaGFuZ2hhaS5hbGl5dW5jcy5jb20vNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzAvc25hcHNob3RzLzEyZDA3ZmUyMWI5MDQ4ODFhOWQzZTcyYWEwZDc0ZTJhLTAwMDAxLmpwZz9FeHBpcmVzPTE2MzczMDk4MjYmT1NTQWNjZXNzS2V5SWQ9TFRBSVZWZll4NkQwSGVMMiZTaWduYXR1cmU9WHNnRE1SZ0RUbjRFWjVjSmdWMWlPUE0lMkJzdlElM0QiLCJEdXJhdGlvbiI6MTYuMjc2N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5VNVZjeDJzQnVNYU5SYjl6M3h2WlpVc3MiLCJBY2Nlc3NLZXlTZWNyZXQiOiJHOW5tbkx6YTdNYmIzaHhKWDRyUTRDWXZ1ekJHSjRncmZDUW92UWZMdExSQiIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTY3MzQxNjI4OTM5OTY0MX0='
},function(player){
console.log('播放器创建好了。')
});
</script>
</body>
</html>
实现效果和播放地址那个方式是一样的，就不截图了。
2.2.3 相关依赖
依赖请去阿里云SDK文档里面自行下载，我下面没指定版本号是因为在父项目中指定过了，我的是微服务项目，你根据自己情况。这个版本一定要去官网查，别用别人的，由于有的jar包没有开源，你可能还得手动导入到本地的maven仓库。
<dependencies>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.jdom/jdom -->
<dependency>
<groupId>org.jdom</groupId>
<artifactId>jdom</artifactId>
<version>1.1</version>
</dependency>
</dependencies>
三、总结
上面只是我的测试代码，我自己的业务需求是，实现课程视频的播放，课程有章节和小节组成，一个章节对应多个小节，每个小节都有对应的视频，点击视频之后，实现视频的播放功能。
这里我只是测试，实现的功能比较简单，当然，还有好多配置并没有加入，比如清晰度、自动播放、循环播放、倍速、弹幕、加广告等等。这些你如果需要的话，可以去查看官方文档：https://player.alicdn.com/aliplayer/presentation/index.html