1、创建模块

1.1、引入视频点播所需依赖

1.2、application.properties

1.3、启动类

2、实现视频上传

2.1、后端

2.1.1、创建常量类

2.1.2、上传视频到阿里云

2.2、配置 nginx

2.3、前端

2.3.1、上传视频组件

2.3.2、方法定义

3、视频删除

3.1、后端

3.1.1、初始化阿里云视频点播客户端

3.1.2、根据视频 ID 删除阿里云视频

3.2、前端

3.2.1、定义 API

3.2.2、定义组件方法

1、创建模块

在 service 下创建 service_vod 模块

1.1、引入视频点播所需依赖

    <dependencies><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.6.0</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-vod</artifactId><version>2.16.11</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-kms</artifactId><version>2.10.1</version></dependency><!-- 视频上传 --><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.5.1</version></dependency><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-vod</artifactId><version>2.16.11</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83</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><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-sdk-vod-upload</artifactId><version>1.4.15</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></dependency></dependencies>

1.2、application.properties

# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod# 环境设置：dev、test、prod
spring.profiles.active=dev#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=accessKeyId
aliyun.vod.file.keysecret=accessKeySecret# 最大上传单个文件大小：默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 ：默认10M
spring.servlet.multipart.max-request-size=1024MB

1.3、启动类

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) // 不加载数据库
@ComponentScan(basePackages = {"com.zyj"})  // 扫描包
public class VodApplication {public static void main(String[] args) {SpringApplication.run(VodApplication.class, args);}
}

2、实现视频上传

2.1、后端

2.1.1、创建常量类

@Component
public class ConstantVodUtils implements InitializingBean {public static String ACCESS_KEY_ID;public static String ACCESS_KEY_SECRET;@Value("${aliyun.vod.file.keyid}")private String accessKeyId;@Value("${aliyun.vod.file.keysecret}")private String accessKeySecret;@Overridepublic void afterPropertiesSet() throws Exception {ACCESS_KEY_ID = accessKeyId;ACCESS_KEY_SECRET = accessKeySecret;}
}

2.1.2、上传视频到阿里云

VodService

public interface VodService {/*** 上传视频到阿里云* @param file 视频文件* @return 上传后的视频ID*/String uploadVideo(MultipartFile file);}

VodServiceImpl

@Service
public class VodServiceImpl implements VodService {/*** 上传视频到阿里云* @param file 视频文件* @return 上传后的视频ID*/@Overridepublic String uploadVideo(MultipartFile file) {try {String accessKeyId = ConstantVodUtils.ACCESS_KEY_ID;String accessKeySecret = ConstantVodUtils.ACCESS_KEY_SECRET;String fileName = file.getName();   // 上传文件输入流String title = fileName.substring(0, fileName.lastIndexOf("."));;  // 阿里云的文件名InputStream inputStream = file.getInputStream();UploadStreamRequest request = new UploadStreamRequest(accessKeyId, accessKeySecret, title, fileName, inputStream);UploadVideoImpl uploader = new UploadVideoImpl();UploadStreamResponse response = uploader.uploadStream(request);String videoId = null;if (response.isSuccess()) {videoId = response.getVideoId();} else {//如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因videoId = response.getVideoId();}return videoId;} catch (Exception e) {e.printStackTrace();return null;}}}

VodController

@RestController
@CrossOrigin
@RequestMapping("/vod/video")
@Api(description="阿里云视频点播微服务")
public class VodController {@Autowiredprivate VodService vodService;/*** 上传视频到阿里云* @param file 视频文件* @return*/@ApiOperation("上传视频到阿里云")@PostMapping("/uploadAliyunVideo")public R uploadAliyunVideo(MultipartFile file) {String videoId = vodService.uploadVideo(file);return R.ok().data("videoId", videoId);}}

2.2、配置 nginx

在 nginx.conf 中的 server{} 中配置

     location ~ /vod/ {           proxy_pass http://localhost:8003;}

在 server{} 的 server_name 下配置

client_max_body_size 1024m;

2.3、前端

2.3.1、上传视频组件

src\views\edu\course\chapter.vue

                <el-form-item label="上传视频"><el-upload :on-success="handleVodUploadSuccess" :on-remove="handleVodRemove" :before-remove="beforeVodRemove":on-exceed="handleUploadExceed" :file-list="fileList" :action="BASE_API +'/vod/video/uploadAliyunVideo'" :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>

2.3.2、方法定义

首先在 data 中定义

                fileList: [],   //上传文件列表BASE_API: process.env.BASE_API // 接口API地址

然后定义方法

            /*** 上传视频成功调用的方法：赋值上传后视频的ID及文件名*/handleVodUploadSuccess(response, file, fileList) {this.video.videoSourceId = response.data.videoId;this.video.videoOriginalName = file.name;},// 试图上传多于一个视频handleUploadExceed(files, fileList) {this.$message.warning('想要重新上传视频，请先删除已上传的视频');},

3、视频删除

3.1、后端

3.1.1、初始化阿里云视频点播客户端

public class InitVodClient {/*** 初始化阿里云视频点播客户端* @param accessKeyId* @param accessKeySecret* @return* @throws ClientException*/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.1.2、根据视频 ID 删除阿里云视频

官方文档：媒资管理

    /*** 根据视频ID删除阿里云中的视频* @param videoId* @return*/@DeleteMapping("/{videoId}")public R deleteAliyunVideo(@ApiParam(name = "videoId", value = "视频ID", required = true) @PathVariable String videoId) {try {// 初始化客户端DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);// 创建删除视频 request 对象DeleteVideoRequest request = new DeleteVideoRequest();// 像 request 对象设置视频IDrequest.setVideoIds(videoId);// 调用初始化对象方法实现删除client.getAcsResponse(request);return R.ok();} catch (Exception e) {e.printStackTrace();throw new GuliException(20001, "删除视频失败");}}

3.2、前端

3.2.1、定义 API

src\api\edu\video.js

    /*** 根据视频ID删除阿里云中的视频* @param {*} videoId * @returns */deleteAliyunVod(videoId) {return request({url: `/vod/video/${videoId}`,method: 'DELETE',})}

3.2.2、定义组件方法

            /*** 上传视频时删除列表中的视频*/beforeVodRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},/*** 根据视频ID删除阿里云中的视频*/handleVodRemove() {video.deleteAliyunVod(this.video.videoSourceId)// 删除成功.then(response => {// 提示信息this.$message({type: 'success',message: '删除视频成功!'});// 清空文件列表this.fileList = [];// 初始化小节中的视频ID和名称this.video.videoSourceId = '';this.video.videoOriginalName = '';})// 删除失败.catch(() => {this.$message({type: 'info',message: '已取消删除'});});}

谷粒学院 —— 10、课程管理：整合阿里云视频点播相关推荐

谷粒学院day09——课程发布与阿里云视频点播服务
day9 课程信息确认与视频点播 1.课程信息确认 1.1 后端实现 1.2 前端实现 2.课程的最终发布 3.课程列表功能 4.课程删除功能 5.阿里云视频点播 5.1 获取视频地址 5.2 获取视 ...
谷粒学院（十七）讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播
文章目录一.讲师列表页 - 前后端 1.Controller类 2.Service类 3.使用Swagger测试 4.创建 api 5.讲师列表组件中调用api 6.页面渲染 7.页面效果展示二. ...
SpringBoot整合阿里云视频点播
文章目录 SpringBoot整合阿里云视频点播 1.准备工作 2.服务端SDK的使用 2.1 导入依赖 2.2 初始化类 2.3 创建读取公共常量的工具类 2.4 获取视频播放地址 2.5 获取视频 ...
Springboot整合阿里云视频点播服务
目录一.阿里云视频点播服务二.开通视频点播云平台 1.搜索视频点播服务 2.开通视频点播 3.选择按使用流量计费三.使用SDK 1.添加Jar包依赖 2.application.properti ...
springboot整合阿里云视频点播服务Vod——实现视频上传、删除、播放
视频点播(ApsaraVideo VoD,简称VoD)是集视频采集.编辑.上传.媒体资源管理.自动化转码处理(窄带高清™).视频审核分析.分发加速于一体的一站式音视频点播解决方案. 阿里云视频点播服务 ...
谷粒学院（十七）讲师列表页 | 讲师详情 | 整合阿里云视频点播
一.讲师列表页 - 后端 1.Controller类 @Api(description = "讲师管理前端") @RestController @RequestMapping(&q ...
微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”九、整合阿里云视频播放器、课程评论功能、讲师详情页、课程详情页、检索功能、课程和讲师列表功能
文章目录一.讲师 1.分页查询接口(后端) 1.controller 2.service 3.测试 2.分页显示讲师(前端) 3.讲师详情页(后端) 1.controller 2.测试 4.讲师详情 ...
springboot + vue 整合阿里云视频点播功能
阿里云视频播放操作 1.1.找到视频点播 1.2.进入管理控制台 1.2.开通服务 1.3.选择"按使用流量计费",开通服务 1.4.开通后,进入管理控制台 1.5.上传音 / ...
谷粒学院——Day09【整合阿里云视频点播】
❤ 作者主页:Java技术一点通的博客 ❀ 个人介绍:大家好,我是Java技术一点通!(￣▽￣)~*

谷粒学院 —— 10、课程管理：整合阿里云视频点播

1、创建模块

1.1、引入视频点播所需依赖

1.2、application.properties

1.3、启动类

2、实现视频上传

2.1、后端

2.1.1、创建常量类

2.1.2、上传视频到阿里云

2.2、配置 nginx

2.3、前端

2.3.1、上传视频组件

2.3.2、方法定义

3、视频删除

3.1、后端

3.1.1、初始化阿里云视频点播客户端

3.1.2、根据视频 ID 删除阿里云视频

3.2、前端

3.2.1、定义 API

3.2.2、定义组件方法

谷粒学院 —— 10、课程管理：整合阿里云视频点播相关推荐

最新文章

热门文章