整合阿里云视频播放器
# 一、后端获取播放凭证
# 1、VideoController
guli-microservice-vod微服务中创建 VideoController.java
controller中创建 getVideoPlayAuth 接口方法
package com.guli.vod.controller;
@Api(description="阿里云视频点播微服务")
@CrossOrigin //跨域
@RestController
@RequestMapping("/vod/video")
public class VideoController {
@GetMapping("get-play-auth/{videoId}")
public R getVideoPlayAuth(@PathVariable("videoId") String videoId) throws Exception {
//获取阿里云存储相关常量
String accessKeyId = ConstantPropertiesUtil.ACCESS_KEY_ID;
String accessKeySecret = ConstantPropertiesUtil.ACCESS_KEY_SECRET;
//初始化
DefaultAcsClient client = AliyunVodSDKUtils.initVodClient(accessKeyId, accessKeySecret);
//请求
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
request.setVideoId(videoId);
//响应
GetVideoPlayAuthResponse response = client.getAcsResponse(request);
//得到播放凭证
String playAuth = response.getPlayAuth();
//返回结果
return R.ok().message("获取凭证成功").data("playAuth", playAuth);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 2、Swagger测试
# 二、前端播放器整合
# 1、点击播放超链接
course/_id.vue
修改课时目录超链接
<a
:href="'/player/'+video.videoSourceId"
:title="video.title"
target="_blank">
1
2
3
4
2
3
4
# 2、layout
因为播放器的布局和其他页面的基本布局不一致，因此创建新的布局容器 layouts/video.vue
<template>
<div class="guli-player">
<div class="head">
<a href="#" title="谷粒学院">
<img class="logo" src="~/assets/img/logo.png" lt="谷粒学院">
</a></div>
<div class="body">
<div class="content"><nuxt/></div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
html,body{
height:100%;
}
</style>
<style scoped>
.head {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.head .logo{
height: 50px;
margin-left: 10px;
}
.body {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 3、api
创建api模块 api/vod.js，从后端获取播放凭证
import request from '@/utils/request'
const api_name = '/vod/video'
export default {
getPlayAuth(vid) {
return request({
url: `${api_name}/get-play-auth/${vid}`,
method: 'get'
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 4、播放组件相关文档
**集成文档：**https://help.aliyun.com/document_detail/51991.html?spm=a2c4g.11186623.2.39.478e192b8VSdEn
**在线配置：**https://player.alicdn.com/aliplayer/setting/setting.html
**功能展示：**https://player.alicdn.com/aliplayer/presentation/index.html
# 5、创建播放页面
创建 pages/player/_vid.vue
（1）引入播放器js库和css样式
<template>
<div>
<!-- 阿里云视频播放器样式 -->
<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" />
<!-- 定义播放器dom -->
<div id="J_prismPlayer" class="prism-player" />
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
（2）获取播放凭证
<script>
import vod from '@/api/vod'
export default {
layout: 'video',//应用video布局
asyncData({ params, error }) {
return vod.getPlayAuth(params.vid).then(response => {
// console.log(response.data.data)
return {
vid: params.vid,
playAuth: response.data.data.playAuth
}
})
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
（3）创建播放器
/**
* 页面渲染完成时：此时js脚本已加载，Aliplayer已定义，可以使用
* 如果在created生命周期函数中使用，Aliplayer is not defined错误
*/
mounted() {
/* eslint-disable no-undef */
/*const player = */new Aliplayer({
id: 'J_prismPlayer',
vid: this.vid, // 视频id
playauth: this.playAuth, // 播放凭证
encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
width: '100%',
height: '500px'
}, function(player) {
console.log('播放器创建成功')
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Aliplayer() 报错：
添加忽略校验检测
1、忽略 no-undef 检测
/* eslint-disable no-undef */
2、忽略 no-new 检测
/* eslint-disable no-new */
1
2
3
4
5
2
3
4
5
（4）其他常见的可选配置
// 以下可选设置
cover: 'http://video.yaohuan.work/image/default/DF3E77AA7D894DA5975068C5F5201D63-6-2.jpg', // 封面
qualitySort: 'asc', // 清晰度排序
format: 'm3u8', // 播放格式
mediaType: 'video', // 返回音频还是视频
autoplay: false, // 自动播放
isLive: false, // 直播
rePlay: false, // 循环播放
preload: true,
controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
useH5Prism: true, // 播放器类型：html5
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#
编辑 (opens new window)
上次更新: 2024/06/15, 15:12:25