在线教育(九)
一、课程列表的显示
一、后端实现
1、定义搜索对象
CourseQuery
package com.guli.edu.query;
@ApiModel(value = "Course查询对象", description = "课程查询对象封装")
@Data
public class CourseQuery implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "课程名称")
private String title;
@ApiModelProperty(value = "讲师id")
private String teacherId;
@ApiModelProperty(value = "一级类别id")
private String subjectParentId;
@ApiModelProperty(value = "二级类别id")
private String subjectId;
}
2、定义service方法
接口
void pageQuery(Page<Course> pageParam, CourseQuery courseQuery);
实现
@Override
public void pageQuery(Page<Course> pageParam, CourseQuery courseQuery) {
QueryWrapper<Course> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("gmt_create");
if (courseQuery == null){
baseMapper.selectPage(pageParam, queryWrapper);
return;
}
String title = courseQuery.getTitle();
String teacherId = courseQuery.getTeacherId();
String subjectParentId = courseQuery.getSubjectParentId();
String subjectId = courseQuery.getSubjectId();
if (!StringUtils.isEmpty(title)) {
queryWrapper.like("title", title);
}
if (!StringUtils.isEmpty(teacherId) ) {
queryWrapper.eq("teacher_id", teacherId);
}
if (!StringUtils.isEmpty(subjectParentId)) {
queryWrapper.ge("subject_parent_id", subjectParentId);
}
if (!StringUtils.isEmpty(subjectId)) {
queryWrapper.ge("subject_id", subjectId);
}
baseMapper.selectPage(pageParam, queryWrapper);
}
3、定义web层方法
@ApiOperation(value = "分页课程列表")
@GetMapping("{page}/{limit}")
public R pageQuery(
@ApiParam(name = "page", value = "当前页码", required = true)
@PathVariable Long page,
@ApiParam(name = "limit", value = "每页记录数", required = true)
@PathVariable Long limit,
@ApiParam(name = "courseQuery", value = "查询对象", required = false)
CourseQuery courseQuery){
Page<Course> pageParam = new Page<>(page, limit);
courseService.pageQuery(pageParam, courseQuery);
List<Course> records = pageParam.getRecords();
long total = pageParam.getTotal();
return R.ok().data("total", total).data("rows", records);
}
二、前端分页查询列表
1、定义api
course.js
getPageList(page, limit, searchObj) {
return request({
url: `${api_name}/${page}/${limit}`,
method: 'get',
params: searchObj
})
},
2、组件中的js
src/views/edu/list.vue
<script>
import course from '@/api/edu/course'
import teacher from '@/api/edu/teacher'
import subject from '@/api/edu/subject'
export default {
data() {
return {
listLoading: true, // 是否显示loading信息
list: null, // 数据列表
total: 0, // 总记录数
page: 1, // 页码
limit: 10, // 每页记录数
searchObj: {
subjectParentId: '',
subjectId: '',
title: '',
teacherId: ''
}, // 查询条件
teacherList: [], // 讲师列表
subjectNestedList: [], // 一级分类列表
subSubjectList: [] // 二级分类列表,
}
},
created() { // 当页面加载时获取数据
this.fetchData()
// 初始化分类列表
this.initSubjectList()
// 获取讲师列表
this.initTeacherList()
},
methods: {
fetchData(page = 1) { // 调用api层获取数据库中的数据
console.log('加载列表')
// 当点击分页组件的切换按钮的时候,会传输一个当前页码的参数page
// 解决分页无效问题
this.page = page
this.listLoading = true
course.getPageList(this.page, this.limit, this.searchObj).then(response => {
// debugger 设置断点调试
if (response.success === true) {
this.list = response.data.rows
this.total = response.data.total
}
this.listLoading = false
})
},
initTeacherList() {
teacher.getList().then(response => {
this.teacherList = response.data.items
})
},
initSubjectList() {
subject.getNestedTreeList().then(response => {
this.subjectNestedList = response.data.items
})
},
subjectLevelOneChanged(value) {
for (let i = 0; i < this.subjectNestedList.length; i++) {
if (this.subjectNestedList[i].id === value) {
this.subSubjectList = this.subjectNestedList[i].children
this.searchObj.subjectId = ''
}
}
},
resetData() {
this.searchObj = {}
this.subSubjectList = [] // 二级分类列表
this.fetchData()
}
}
}
</script>
3、组件模板
查询表单
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<!-- 所属分类:级联下拉列表 -->
<!-- 一级分类 -->
<el-form-item label="课程类别">
<el-select
v-model="searchObj.subjectParentId"
placeholder="请选择"
@change="subjectLevelOneChanged">
<el-option
v-for="subject in subjectNestedList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
<!-- 二级分类 -->
<el-select v-model="searchObj.subjectId" placeholder="请选择">
<el-option
v-for="subject in subSubjectList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
</el-form-item>
<!-- 标题 -->
<el-form-item>
<el-input v-model="searchObj.title" placeholder="课程标题"/>
</el-form-item>
<!-- 讲师 -->
<el-form-item>
<el-select
v-model="searchObj.teacherId"
placeholder="请选择讲师">
<el-option
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"/>
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
表格和分页
表格添加了 row-class-name="myClassList" 样式定义
<!-- 表格 -->
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="数据加载中"
border
fit
highlight-current-row
row-class-name="myClassList">
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="课程信息" width="470" align="center">
<template slot-scope="scope">
<div class="info">
<div class="pic">
<img :src="scope.row.cover" alt="scope.row.title" width="150px">
</div>
<div class="title">
<a href="">{{ scope.row.title }}</a>
<p>{{ scope.row.lessonNum }}课时</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">
{{ scope.row.gmtCreate.substr(0, 10) }}
</template>
</el-table-column>
<el-table-column label="发布时间" align="center">
<template slot-scope="scope">
{{ scope.row.gmtModified.substr(0, 10) }}
</template>
</el-table-column>
<el-table-column label="价格" width="100" align="center" >
<template slot-scope="scope">
{{ Number(scope.row.price) === 0 ? '免费' :
'¥' + scope.row.price.toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="buyCount" label="付费学员" width="100" align="center" >
<template slot-scope="scope">
{{ scope.row.buyCount }}人
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<router-link :to="'/edu/course/info/'+scope.row.id">
<el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>
</router-link>
<router-link :to="'/edu/course/chapter/'+scope.row.id">
<el-button type="text" size="mini" icon="el-icon-edit">编辑课程大纲</el-button>
</router-link>
<el-button type="text" size="mini" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="fetchData"
/>
4、css的定义
<style scoped>
.myClassList .info {
width: 450px;
overflow: hidden;
}
.myClassList .info .pic {
width: 150px;
height: 90px;
overflow: hidden;
float: left;
}
.myClassList .info .pic a {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.myClassList .info .pic img {
display: block;
width: 100%;
}
.myClassList td .info .title {
width: 280px;
float: right;
height: 90px;
}
.myClassList td .info .title a {
display: block;
height: 48px;
line-height: 24px;
overflow: hidden;
color: #00baf2;
margin-bottom: 12px;
}
.myClassList td .info .title p {
line-height: 20px;
margin-top: 5px;
color: #818181;
}
</style>
二、删除课程
一、后端实现
1、web层
定义删除api方法:CourseAdminController.java
@ApiOperation(value = "根据ID删除课程")
@DeleteMapping("{id}")
public R removeById(
@ApiParam(name = "id", value = "课程ID", required = true)
@PathVariable String id){
boolean result = courseService.removeCourseById(id);
if(result){
return R.ok();
}else{
return R.error().message("删除失败");
}
}
2、service层
如果用户确定删除,则首先删除video记录,然后删除chapter记录,最后删除Course记录
2.1、在VideoService中定义根据courseId删除video业务方法
接口
boolean removeByCourseId(String courseId);
实现
@Override
public boolean removeByCourseId(String courseId) {
QueryWrapper<Video> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("course_id", courseId);
Integer count = baseMapper.delete(queryWrapper);
return null != count && count > 0;
}
2.2、在ChapterService中定义根据courseId删除chapter业务方法
接口
boolean removeByCourseId(String courseId);
实现
@Override
public boolean removeByCourseId(String courseId) {
QueryWrapper<Chapter> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("course_id", courseId);
Integer count = baseMapper.delete(queryWrapper);
return null != count && count > 0;
}
2.3、删除当前course记录
接口:CourseService.java
boolean removeCourseById(String id);
实现:CourseServiceImpl.java
@Override
public boolean removeCourseById(String id) {
//根据id删除所有视频
videoService.removeByCourseId(id);
//根据id删除所有章节
chapterService.removeByCourseId(id);
Integer result = baseMapper.deleteById(id);
return null != result && result > 0;
}
二、前端实现
1、定义api
course.js中添加删除方法
removeById(id) {
return request({
url: `${api_name}/${id}`,
method: 'delete'
})
}
2、修改删除按钮
src/api/edu/course.js 删除按钮注册click事件
<el-button type="text" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
3、编写删除方法
removeDataById(id) {
// debugger
this.$confirm('此操作将永久删除该课程,以及该课程下的章节和视频,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return course.removeById(id)
}).then(() => {
this.fetchData()
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch((response) => { // 失败
if (response === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
})
}
})
}
三、视频点播简介
一、阿里云视频点播技术能力盘点
参考文章:
https://blog.csdn.net/qq_33857573/article/details/79564255
视频点播(ApsaraVideo for VoD)是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速于一体的一站式音视频点播解决方案。
1、应用场景
- 音视频网站:无论是初创视频服务企业,还是已拥有海量视频资源,可定制化的点播服务帮助客户快速搭建拥有极致观看体验、安全可靠的视频点播应用。
- 短视频:集音视频拍摄、特效编辑、本地转码、高速上传、自动化云端转码、媒体资源管理、分发加速、播放于一体的完整短视频解决方案。目前已帮助1000+APP快速实现手机短视频功能。
- 直播转点播:将直播流同步录制为点播视频,用于回看。并支持媒资管理、媒体处理(转码及内容审核/智能首图等AI处理)、内容制作(云剪辑)、CDN分发加速等一系列操作。
- 在线教育:为在线教育客户提供简单易用、安全可靠的视频点播服务。可通过控制台/API等多种方式上传教学视频,强大的转码能力保证视频可以快速发布,覆盖全网的加速节点保证学生观看的流畅度。防盗链、视频加密等版权保护方案保护教学内容不被窃取。
- 视频生产制作:提供在线可视化剪辑平台及丰富的OpenAPI,帮助客户高效处理、制作视频内容。除基础的剪切拼接、混音、遮标、特效、合成等一系列功能外,依托云剪辑及点播一体化服务还可实现标准化、智能化剪辑生产,大大降低视频制作的槛,缩短制作时间,提升内容生产效率。
- 内容审核:应用于短视频平台、传媒行业审核等场景,帮助客户从从语音、文字、视觉等多维度精准识别视频、封面、标题或评论的违禁内容进行AI智能审核与人工审核。
2、功能介绍
产品功能
二、开通视频点播云平台
1、选择视频点播服务
产品->企业应用->视频云->视频点播
2、开通视频点播
3、选择按使用流量计费
4、资费说明
https://www.aliyun.com/price/product?spm=a2c4g.11186623.2.12.7fbd59b9vmXVN6#/vod/detail
- 后付费
- 套餐包
- 欠费说明
- 计费案例:https://help.aliyun.com/document_detail/64032.html?spm=a2c4g.11186623.4.3.363db1bcfdvxB5
5、整体流程
使用视频点播实现音视频上传、存储、处理和播放的整体流程如下:
- 用户获取上传授权。
- VoD下发 上传地址和凭证 及 VideoId。
- 用户上传视频保存视频ID(VideoId)。
- 用户服务端获取播放凭证。
- VoD下发带时效的播放凭证。
- 用户服务端将播放凭证下发给客户端完成视频播放。
三、视频点播服务的基本使用
完整的参考文档
https://help.aliyun.com/product/29932.html?spm=a2c4g.11186623.6.540.3c356a58OEmVZJ
1、设置转码格式
选择全局设置 > 转码设置,单击添加转码模板组。
在视频转码模板组页面,根据业务需求选择封装格式和清晰度。
或直接将已有的模板设置为默认即可
2、分类管理
选择全局设置 > 分类管理
3、上传视频文件
选择媒资库 > 音视频,单击上传音视频
4、配置域名
音视频上传完成后,必须配一个已备案的域名,并完成CNAME绑定
得到CNAME
在购买域名的服务商处的管理控制台配置域名解析
5、在控制台查看视频
此时视频可以在阿里云控制台播放
6、获取web播放器代码
Web播放器
四、使用服务端SDK
一、服务端SDK
1、简介
sdk的方式将api进行了进一步的封装,不用自己创建工具类。
我们可以基于服务端SDK编写代码来调用点播API,实现对点播产品和服务的快速操作。
2、功能介绍
-
SDK封装了对API的调用请求和响应,避免自行计算较为繁琐的 API签名。
-
支持所有点播服务的API,并提供了相应的示例代码。
-
支持7种开发语言,包括:Java、Python、PHP、.NET、Node.js、Go、C/C++。
-
通常在发布新的API后,我们会及时同步更新SDK,所以即便您没有找到对应API的示例代码,也可以参考旧的示例自行实现调用。
二、使用SDK
1、安装
参考文档:https://help.aliyun.com/document_detail/57756.html
添加maven仓库的配置和依赖到pom
<repositories>
<repository>
<id>sonatype-nexus-staging</id>
<name>Sonatype Nexus Staging</name>
<url>https://oss.sonatype.org/service/local/staging/deploy/maven2/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.3.3</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
<version>2.15.5</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
2、初始化
参考文档:https://help.aliyun.com/document_detail/61062.html
根据文档示例创建 AliyunVODSDKUtils.java
package com.atguigu.aliyunvod.util;
public class AliyunVodSDKUtils {
public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
}
}
3、创建测试类
创建 VodSdkTest.java
package com.atguigu.aliyunvod;
public class VodSdkTest {
String accessKeyId = "你的accessKeyId";
String accessKeySecret = "你的accessKeySecret";
}
三、创建测试用例
参考文档:https://help.aliyun.com/document_detail/61064.html
1、获取视频播放凭证
根据文档中的代码,修改如下
/**
* 获取视频播放凭证
* @throws ClientException
*/
@Test
public void testGetVideoPlayAuth() throws ClientException {
//初始化客户端、请求对象和相应对象
DefaultAcsClient client = AliyunVodSDKUtils.initVodClient(accessKeyId, accessKeySecret);
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();
try {
//设置请求参数
request.setVideoId("视频ID");
//获取请求响应
response = client.getAcsResponse(request);
//输出请求结果
//播放凭证
System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");
//VideoMeta信息
System.out.print("VideoMeta.Title = " + response.getVideoMeta().getTitle() + "\n");
} catch (Exception e) {
System.out.print("ErrorMessage = " + e.getLocalizedMessage());
}
System.out.print("RequestId = " + response.getRequestId() + "\n");
}
2、获取视频播放地址
/**
* 获取视频播放地址
* @throws ClientException
*/
@Test
public void testGetPlayInfo() throws ClientException {
//初始化客户端、请求对象和相应对象
DefaultAcsClient client = AliyunVodSDKUtils.initVodClient(accessKeyId, accessKeySecret);
GetPlayInfoRequest request = new GetPlayInfoRequest();
GetPlayInfoResponse response = new GetPlayInfoResponse();
try {
//设置请求参数
//注意:这里只能获取非加密视频的播放地址
request.setVideoId("视频ID");
//获取请求响应
response = client.getAcsResponse(request);
//输出请求结果
List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
//播放地址
for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
}
//Base信息
System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");
} catch (Exception e) {
System.out.print("ErrorMessage = " + e.getLocalizedMessage());
}
System.out.print("RequestId = " + response.getRequestId() + "\n");
}
五、文件上传测试
参考文档:https://help.aliyun.com/document_detail/53406.html
一、安装SDK
1、配置pom
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.3.3</version>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
<version>2.15.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
2、安装非开源jar包
1.在本地Maven仓库中安装jar包:
下载视频上传SDK,解压,命令行进入lib目录,执行以下代码
mvn install:install-file -DgroupId=com.aliyun -DartifactId=aliyun-sdk-vod-upload -Dversion=1.4.11 -Dpackaging=jar -Dfile=aliyun-java-vod-upload-1.4.11.jar
2.在pom中引入jar包
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
<version>1.4.11</version>
</dependency>
二、测试
1、创建测试文件
package com.atguigu.aliyunvod;
public class UploadTest {
//账号AK信息请填写(必选)
private static final String accessKeyId = "你的accessKeyId";
//账号AK信息请填写(必选)
private static final String accessKeySecret = "你的accessKeySecret";
}
2、测试本地文件上传
/**
* 视频上传
*/
@Test
public void testUploadVideo(){
//1.音视频上传-本地文件上传
//视频标题(必选)
String title = "3 - How Does Project Submission Work - upload by sdk";
//本地文件上传和文件流上传时,文件名称为上传文件绝对路径,如:/User/sample/文件名称.mp4 (必选)
//文件名必须包含扩展名
String fileName = "E:/共享/资源/课程视频/3 - How Does Project Submission Work.mp4";
//本地文件上传
UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);
/* 可指定分片上传时每个分片的大小,默认为1M字节 */
request.setPartSize(1 * 1024 * 1024L);
/* 可指定分片上传时的并发线程数,默认为1,(注:该配置会占用服务器CPU资源,需根据服务器情况指定)*/
request.setTaskNum(1);
/* 是否开启断点续传, 默认断点续传功能关闭。当网络不稳定或者程序崩溃时,再次发起相同上传请求,可以继续未完成的上传任务,适用于超时3000秒仍不能上传完成的大文件。
注意: 断点续传开启后,会在上传过程中将上传位置写入本地磁盘文件,影响文件上传速度,请您根据实际情况选择是否开启*/
request.setEnableCheckpoint(false);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadVideoResponse response = uploader.uploadVideo(request);
System.out.print("RequestId=" + response.getRequestId() + "\n"); //请求视频点播服务的请求ID
if (response.isSuccess()) {
System.out.print("VideoId=" + response.getVideoId() + "\n");
} else {
/* 如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因 */
System.out.print("VideoId=" + response.getVideoId() + "\n");
System.out.print("ErrorCode=" + response.getCode() + "\n");
System.out.print("ErrorMessage=" + response.getMessage() + "\n");
}
}
六、视频点播微服务的创建
一、创建视频点播微服务
1、创建微服务模块
Artifact:service-vod
2、pom
(1)service-vod中引入依赖
<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>
</dependencies>
3、application.properties
# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod
# 环境设置:dev、test、prod
spring.profiles.active=dev
#阿里云 vod
#不同的服务器,地址不同
aliyun.vod.file.keyid=your accessKeyId
aliyun.vod.file.keysecret=your accessKeySecret
# 最大上传单个文件大小:默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 :默认10M
spring.servlet.multipart.max-request-size=1024MB
4、logback.xml
5、启动类
VodApplication.java
package com.guli.vod;
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages={"com.atguigu"})
public class VodApplication {
public static void main(String[] args) {
SpringApplication.run(VodApplication.class, args);
}
}
二、整合阿里云vod实现视频上传
1、创建常量类
ConstantPropertiesUtil.java
package com.guli.vod.util;
@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {
@Value("${aliyun.vod.file.keyid}")
private String keyId;
@Value("${aliyun.vod.file.keysecret}")
private String keySecret;
public static String ACCESS_KEY_ID;
public static String ACCESS_KEY_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
ACCESS_KEY_ID = keyId;
ACCESS_KEY_SECRET = keySecret;
}
}
2、复制工具类到项目中
AliyunVodSDKUtils.java
package com.guli.vod.util;
public class AliyunVodSDKUtils {
public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
}
}
3、配置swagger
web和admin
4、创建service
接口:VideoService.java
package com.guli.vod.service;
public interface VideoService {
String uploadVideo(MultipartFile file);
}
实现:VideoServiceImpl.java
package com.guli.vod.service.impl;
@Service
public class VideoServiceImpl implements VideoService {
@Override
public String uploadVideo(MultipartFile file) {
try {
InputStream inputStream = file.getInputStream();
String originalFilename = file.getOriginalFilename();
String title = originalFilename.substring(0, originalFilename.lastIndexOf("."));
UploadStreamRequest request = new UploadStreamRequest(
ConstantPropertiesUtil.ACCESS_KEY_ID,
ConstantPropertiesUtil.ACCESS_KEY_SECRET,
title, originalFilename, inputStream);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadStreamResponse response = uploader.uploadStream(request);
//如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。
// 其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因
String videoId = response.getVideoId();
if (!response.isSuccess()) {
String errorMessage = "阿里云上传错误:" + "code:" + response.getCode() + ", message:" + response.getMessage();
log.warn(errorMessage);
if(StringUtils.isEmpty(videoId)){
throw new GuliException(20001, errorMessage);
}
}
return videoId;
} catch (IOException e) {
throw new GuliException(20001, "guli vod 服务上传失败");
}
}
}
5、创建controller
VideoAdminController.java
package com.guli.vod.controller.admin;
@Api(description="阿里云视频点播微服务")
@CrossOrigin //跨域
@RestController
@RequestMapping("/admin/vod/video")
public class VideoAdminController {
@Autowired
private VideoService videoService;
@PostMapping("upload")
public R uploadVideo(
@ApiParam(name = "file", value = "文件", required = true)
@RequestParam("file") MultipartFile file) throws Exception {
String videoId = videoService.uploadVideo(file);
return R.ok().message("视频上传成功").data("videoId", videoId);
}
}
6、启动后端vod微服务
7、swagger测试
七、前端整合视频上传
一、配置nginx反向代理
将接口地址加入nginx配置
location ~ /vod/ {
proxy_pass http://localhost:8003;
}
配置nginx上传文件大小,否则上传时会有 413 (Request Entity Too Large) 异常
打开nginx主配置文件nginx.conf,找到http{},添加
client_max_body_size 1024m;
重启nginx
nginx -s reload
二、前端实现
1、数据定义
fileList: [],//上传文件列表
BASE_API: process.env.BASE_API // 接口API地址
2、整合上传组件
<el-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+'/admin/vod/video/upload'"
:limit="1"
class="upload-demo">
<el-button size="small" type="primary">上传视频</el-button>
<el-tooltip placement="right-end">
<div slot="content">最大支持1G,<br>
支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
<i class="el-icon-question"/>
</el-tooltip>
</el-upload>
</el-form-item>
3、方法定义
//成功回调
handleVodUploadSuccess(response, file, fileList) {
this.video.videoSourceId = response.data.videoId
},
//视图上传多于一个视频
handleUploadExceed(files, fileList) {
this.$message.warning('想要重新上传视频,请先删除已上传的视频')
},
八、删除云端视频
文档:服务端SDK->Java SDK->媒资管理
https://help.aliyun.com/document_detail/61065.html?spm=a2c4g.11186623.6.831.654b3815cIxvma#h2–div-id-deletevideo-div-7
一、后端
1、service
接口
void removeVideo(String videoId);
实现
@Override
public void removeVideo(String videoId) {
try{
DefaultAcsClient client = AliyunVodSDKUtils.initVodClient(
ConstantPropertiesUtil.ACCESS_KEY_ID,
ConstantPropertiesUtil.ACCESS_KEY_SECRET);
DeleteVideoRequest request = new DeleteVideoRequest();
request.setVideoIds(videoId);
DeleteVideoResponse response = client.getAcsResponse(request);
System.out.print("RequestId = " + response.getRequestId() + "\n");
}catch (ClientException e){
throw new GuliException(20001, "视频删除失败");
}
}
2、controller
@DeleteMapping("{videoId}")
public R removeVideo(@ApiParam(name = "videoId", value = "云端视频id", required = true)
@PathVariable String videoId){
videoService.removeVideo(videoId);
return R.ok().message("视频删除成功");
}
二、前端
1、定义api
api/edu/vod.js
import request from '@/utils/request'
const api_name = '/admin/vod/video'
export default {
removeById(id) {
return request({
url: `${api_name}/${id}`,
method: 'delete'
})
}
}
2、组件方法
views/edu/course/chapter.vue
import vod from '@/api/edu/vod'
beforeVodRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`)
},
handleVodRemove(file, fileList) {
console.log(file)
vod.removeById(this.video.videoSourceId).then(response=>{
this.$message({
type: 'success',
message: response.message
})
})
},
九、视频文件回显
一、数据库优化冗余字段
1、video表中添加一列
video_original_name varchar 100 原始文件名称
2、pojo中定义新增字段
Video.java、VideoVo.java、VideoForm.java
@ApiModelProperty(value = "云服务器上存储的视频文件名称")
private String videoOriginalName;
二、前端修改
1、chapter.vue
添加videoOriginalName的数据定义
video: {// 课时对象
title: '',
sort: 0,
free: false,
videoSourceId: '',
videoOriginalName: ''
},
2、上传成功回调
添加对videoOriginalName的赋值
handleVodUploadSuccess(response, file, fileList) {
this.video.videoSourceId = response.data.videoId
this.video.videoOriginalName = file.name;
},
3、修改回调Video
editVideo(videoId) {
this.dialogVideoFormVisible = true
video.getVideoInfoById(videoId).then(response => {
this.video = response.data.item
this.fileList = [{'name': this.video.videoOriginalName}]
})
},
4、删除云端video回调
handleVodRemove(file, fileList) {
console.log(file)
vod.removeById(this.video.videoSourceId).then(response => {
this.video.videoSourceId = ''
this.video.videoOriginalName = ''
this.fileList = []
this.$message({
type: 'success',
message: response.message
})
})
},