SpringBoot + Vue 整合阿里云视频点播
一、阿里云视频点播简介
阿里云视频点播（VOD）是集音视频上传、自动化转码处理、媒体资源管理、分发加速于一体的全链路音视频点播服务。借助灵活、可伸缩的存储、处理及内容分发服务，帮助企业和开发者快速搭建安全、弹性、高可定制的点播平台和应用，提供端到端的完整解决方案。
阿里云视频点播整体服务构建在阿里云强大的基础设施服务之上，提供端到端的视频全链路服务，帮助企业和开发者快速搭建安全、弹性、高可定制的视频点播平台和应用。提供Web管理控制台和软件开发工具包（API+SDK，包括视频上传、播放器等）。您可以通过它们使用和管理视频点播服务（视频审核、云剪辑），也可以与您自己的应用和服务集成。
作为国内领先的短视频服务商，短视频SDK提供了视频录制、导入裁剪压缩、视频特效编辑等功能，具备美颜、人脸识别+AR贴纸、变速录制、实时混音、多视频拼接、实时滤镜、动图、音乐、MV、字幕、涂鸦等主流的短视频功能。您可以根据自己的需求和业务场景，选择低成本的基础版或标准版，在App中快速集成短视频功能。您也可以选择具有更强大视频编辑功能的专业版，通过自行定制交互和界面，充分与业务整合，快速实现差异化的短视频业务。
所有服务按使用付费，服务能力自动伸缩，告别复杂的架构设计和编程开发，维护成本几近于零，您可以专注于实现业务逻辑及提升最终用户体验。
Spring Boot + Vue 整合阿里云视频点播
二、阿里云视频点播的优势
1、灵活简单易用
- 点播场景完整支持，简单易用的控制台，并提供丰富的SDK及开放API，支持定制的开发需求;
- 按使用付费，服务能力自动伸缩，维护成本几近于零，您可专注于业务实现及最终的用户体验。
2、领先转码技术
- 窄带高清和H.265技术，提供更佳画质、更低码率的自适应转码输出;
- 高速稳定的并行转码系统，转码任务规模无缝扩展，保障视频转码质量和效率。
3、极致播放体验
- 多码率、多清晰度、多格式的差异化视频流，满足全终端的播放需求;
- 跨运营商、跨地域全网覆盖的视频分发网络，提供更稳定、更流畅的视听体验。
4、酷炫视频玩法
- 快速集成短视频录制编辑功能，可按模块组合使用，多分辨率支持，UI自定义;
- 实时滤镜、人脸贴图等前卫玩法应有尽有。
5、多重服务保障
- 高可靠的云存储服务保障海量音视频永久安全存储;
- 灵活定制的防盗链和播放鉴权功能保障媒体资源安全;
- 完善的监控体系&服务体系，7*24小时为点播服务保驾护航。
三、Spring Boot + Vue 整合阿里云视频点播
（一）引入依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>service</artifactId>
<groupId>com.atguigu</groupId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>service_vod</artifactId>
<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.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>
</project>
这里需要注意的是 aliyun-java-sdk-vod 飘红问题，aliyun-java-sdk-vod 没有开源，所以不能直接在pom文件中直接引用依赖
通常情况下：
- 下载aliyun-sdk-vod-upload.jar
- 将测试样例解压，进入lib目录下，在命令行执行下面的命令
mvn install:install-file -DgroupId=com.aliyun -DartifactId=aliyun-sdk-vod-upload -Dversion=1.4.12 -Dpackaging=jar -Dfile=aliyun-java-vod-upload-1.4.12.ja
在pom文件中引入该依赖即可
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
<version>1.4.12</version>
</dependency>
但有的时候确实不好使，小编就是这样
我的解决办法（直接导入jar包！！！）：
（二）Spring Boot 后端部分
1、配置文件application.properties
# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod
# 环境设置：dev、test、prod
spring.profiles.active=dev
#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=LTAI4GJ2dfYZAmAusqM4qwti
aliyun.vod.file.keysecret=JwctWzF9sxACGAX7FjZ5wd8ewvjCPl
# 最大上***个文件大小：默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 ：默认10M
spring.servlet.multipart.max-request-size=1024MB
2、controller
package com.atguigu.vod.controller;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.vod.model.v20170321.DeleteVideoRequest;
import com.atguigu.commonutils.R;
import com.atguigu.commonutils.exceptionhandler.GuliException;
import com.atguigu.vod.Utils.ConstantVodUtils;
import com.atguigu.vod.Utils.InitVodCilent;
import com.atguigu.vod.service.VodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.util.List;
@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {
@Autowired
private VodService vodService;
//上传视频到阿里云
@PostMapping("uploadAlyiVideo")
public R uploadAlyiVideo(MultipartFile file) {
//返回上传视频id
String videoId = vodService.uploadVideoAly(file);
return R.Ok().data("videoId",videoId);
}
//根据视频id删除阿里云视频
@DeleteMapping("removeAlyVideo/{id}")
public R removeAlyVideo(@PathVariable String id) {
try {
//初始化对象
DefaultAcsClient client = InitVodCilent.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
//创建删除视频request对象
DeleteVideoRequest request = new DeleteVideoRequest();
//向request设置视频id
request.setVideoIds(id);
//调用初始化对象的方法实现删除
client.getAcsResponse(request);
return R.Ok();
}catch(Exception e) {
e.printStackTrace();
throw new GuliException(20001,"删除视频失败");
}
}
//删除多个阿里云视频的方法
//参数多个视频id List videoIdList
@DeleteMapping("delete-batch")
public R deleteBatch(@RequestParam("videoIdList") List<String> videoIdList) {
vodService.removeMoreAlyVideo(videoIdList);
return R.Ok();
}
}
3、service
package com.atguigu.vod.service.impl;
import com.aliyun.vod.upload.impl.UploadVideoImpl;
import com.aliyun.vod.upload.req.UploadStreamRequest;
import com.aliyun.vod.upload.resp.UploadStreamResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.vod.model.v20170321.DeleteVideoRequest;
import com.atguigu.commonutils.R;
import com.atguigu.commonutils.exceptionhandler.GuliException;
import com.atguigu.vod.Utils.ConstantVodUtils;
import com.atguigu.vod.Utils.InitVodCilent;
import com.atguigu.vod.service.VodService;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
@Service
public class VodServiceImpl implements VodService {
@Override
public String uploadVideoAly(MultipartFile file) {
try {
//accessKeyId, accessKeySecret
//fileName：上传文件原始名称
// 01.03.09.mp4
String fileName = file.getOriginalFilename();
//title：上传之后显示名称
String title = fileName.substring(0, fileName.lastIndexOf("."));
//inputStream：上传文件输入流
InputStream inputStream = file.getInputStream();
UploadStreamRequest request = new UploadStreamRequest(ConstantVodUtils.ACCESS_KEY_ID,ConstantVodUtils.ACCESS_KEY_SECRET, 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;
}
}
@Override
public void removeMoreAlyVideo(List videoIdList) {
try {
//初始化对象
DefaultAcsClient client = InitVodCilent.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
//创建删除视频request对象
DeleteVideoRequest request = new DeleteVideoRequest();
//videoIdList值转换成 1,2,3
String videoIds = StringUtils.join(videoIdList.toArray(), ",");
//向request设置视频id
request.setVideoIds(videoIds);
//调用初始化对象的方法实现删除
client.getAcsResponse(request);
}catch(Exception e) {
e.printStackTrace();
throw new GuliException(20001,"删除视频失败");
}
}
}
4、utils
package com.atguigu.vod.Utils;
import com.aliyun.oss.ClientException;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.profile.DefaultProfile;
public class InitVodCilent {
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;
}
}
package com.atguigu.vod.Utils;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
@Component
public class ConstantVodUtils implements InitializingBean {
@Value("${aliyun.vod.file.keyid}")
private String keyid;
@Value("${aliyun.vod.file.keysecret}")
private String keysecret;
public static String ACCESS_KEY_SECRET;
public static String ACCESS_KEY_ID;
@Override
public void afterPropertiesSet() throws Exception {
ACCESS_KEY_ID = keyid;
ACCESS_KEY_SECRET = keysecret;
}
}
（三）Vue前端部分
1、template部分
<el-form-item label="上传视频">
<el-upload
:on-success=
"handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+'/eduvod/video/uploadAlyiVideo'"
: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、data部分
data() {
return {
video: {
title: '',
sort: 0,
free: 0,
videoSourceId: '',
videoOriginalName:''//视频名称
},
fileList: [],//上传文件列表
BASE_API: process.env.BASE_API // 接口API地址
}
},
3、methods部分
methods:{
//点击确定调用的方法
handleVodRemove() {
//调用接口的删除视频的方法
video.deleteAliyunvod(this.video.videoSourceId)
.then(response => {
//提示信息
this.$message({
type: 'success',
message: '删除视频成功!'
});
//把文件列表清空
this.fileList = []
//把video视频id和视频名称值清空
//上传视频id赋值
this.video.videoSourceId = ''
//上传视频名称赋值
this.video.videoOriginalName = ''
})
},
//点击×调用这个方法
beforeVodRemove(file,fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//上传视频成功调用的方法
handleVodUploadSuccess(response, file, fileList) {
//上传视频id赋值
this.video.videoSourceId = response.data.videoId
//上传视频名称赋值
this.video.videoOriginalName = file.name
},
handleUploadExceed() {
this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},
//==============================小节操作====================================
//删除小节
removeVideo(id) {
this.$confirm('此操作将删除小节, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定，执行then方法
//调用删除的方法
video.deleteVideo(id)
.then(response =>{//删除成功
//提示信息
this.$message({
type: 'success',
message: '删除小节成功!'
});
//刷新页面
this.getChapterVideo()
})
}) //点击取消，执行catch方法
},
//添加小节弹框的方法
openVideo(chapterId) {
//弹框
this.dialogVideoFormVisible = true
//设置章节id
this.video.chapterId = chapterId
},
//添加小节
addVideo() {
//设置课程id
this.video.courseId = this.courseId
video.addVideo(this.video)
.then(response => {
//关闭弹框
this.dialogVideoFormVisible = false
//提示
this.$message({
type: 'success',
message: '添加小节成功!'
});
//刷新页面
this.getChapterVideo()
})
},
saveOrUpdateVideo() {
this.addVideo()
},
}
（四）实现效果
==上传视频==>
汤臣倍健开奖47人在聊
