springboot + vue 整合阿里云视频点播功能

阿里云视频播放操作

1.1、找到视频点播

1.2、进入管理控制台

1.2、开通服务

1.3、选择“按使用流量计费”，开通服务

1.4、开通后，进入管理控制台

1.5、上传音 / 视频

1.6、启用存储地址

1.7、已启用

1.8、选择上传的音频，开始上传

1.9、上传成功

1.10、分类管理

1.11、视频转码

1.12、再上传一个视频，添加转码，分类上传

1.13、上传后，显示转码中，需要一点时间

使用工具类进行视频上传

2.1、引入依赖

<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>

2.2、初始化类

public class InitObject {public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {String regionId = "cn-guangzhou";  // 点播服务接入区域DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);DefaultAcsClient client = new DefaultAcsClient(profile);return client;}
}

2.3、测试类

public class TestVod {public static void main(String[] args) {String accessKeyId = "xxxx";String accessKeySecret = "xxxxx";String title = "6 - What If I Want to Move Faster - upload by sdk";   //上传之后文件名称String fileName = "E:\\aaaaa\\6 - What If I Want to Move Faster.mp4";  //本地文件路径和名称//上传视频的方法UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);/* 可指定分片上传时每个分片的大小，默认为2M字节 */request.setPartSize(2 * 1024 * 1024L);/* 可指定分片上传时的并发线程数，默认为1，(注：该配置会占用服务器CPU资源，需根据服务器情况指定）*/request.setTaskNum(1);UploadVideoImpl uploader = new UploadVideoImpl();UploadVideoResponse response = uploader.uploadVideo(request);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 根据视频iD获取视频播放凭证public static void getPlayAuth() throws Exception{DefaultAcsClient client = InitObject.initVodClient("xxxx", "xxxx");GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();request.setVideoId("990b13273e004b088da9a456ba425e28");response = client.getAcsResponse(request);System.out.println("playAuth:"+response.getPlayAuth());}//1 根据视频iD获取视频播放地址public static void getPlayUrl() throws Exception{//创建初始化对象DefaultAcsClient client = InitObject.initVodClient("xxxx", "xxxx");//创建获取视频地址request和responseGetPlayInfoRequest request = new GetPlayInfoRequest();GetPlayInfoResponse response = new GetPlayInfoResponse();//向request对象里面设置视频idrequest.setVideoId("990b13273e004b088da9a456ba425e28");//调用初始化对象里面的方法，传递request，获取数据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");}
}

2.4、运行

2.5、查看云服务器

使用springboot进行上传

3.1、引入依赖（同上）

3.2、配置application文件

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

3.3、获取配置中的值的Bean

@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;@Overridepublic void afterPropertiesSet() throws Exception {ACCESS_KEY_ID = keyid;ACCESS_KEY_SECRET = keysecret;}
}

3.4、controller代码


@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {@Autowiredprivate VodService vodService;//上传视频到阿里云@PostMapping("uploadAlyiVideo")public R uploadAlyiVideo(MultipartFile file) {//返回上传视频idString videoId = vodService.uploadVideoAly(file);return R.ok().data("videoId",videoId);}
}

3.5、service代码

@Service
public class VodServiceImpl implements VodService {@Overridepublic String uploadVideoAly(MultipartFile file) {try {//accessKeyId, accessKeySecret//fileName：上传文件原始名称// 01.03.09.mp4String 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;}}
}

3.6、swagger测试

3.7、服务器查看

整合前端进行上传

4.1 有nginx进行反向代理的设置

4.1.1、设置请求转发地址

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

4.1.2、设置上传文件的大小限制

配置nginx上传文件大小，否则上传时会有 413 (Request Entity Too Large) 异常；
打开nginx主配置文件nginx.conf，找到http{}，添加

client_max_body_size 1024m;

4.1.3、重启服务

nginx -s reload

或者先关闭再启动

#关闭服务
nginx.exe -s stop
#启用
nginx.exe

4.2、前端实现-数据定义

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

4.3、整合上传组件

<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>

4.4、方法回调

 //上传视频成功调用的方法handleVodUploadSuccess(response, file, fileList) {//上传视频id赋值this.video.videoSourceId = response.data.videoId//上传视频名称赋值this.video.videoOriginalName = file.name},handleUploadExceed() {this.$message.warning('想要重新上传视频，请先删除已上传的视频')},

4.5、页面上传文件

4.6、查看服务器

点击x删除上传

5.1、初始化类

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;}
}

5.2、删除接口

//根据视频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设置视频idrequest.setVideoIds(id);//调用初始化对象的方法实现删除client.getAcsResponse(request);return R.ok();}catch(Exception e) {e.printStackTrace();throw new GuliException(20001,"删除视频失败");}}

5.3、前端方法

5.4、点击x的事件，对应的方法

 //点击确定调用的方法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 }？`);
},

5.5、页面效果

5.6、服务器查看，已经删除

结束！！！！

        如果你困在一个地方，每天都完全一样，做什么都改变不了状况，你会怎么办？

springboot + vue 整合阿里云视频点播功能相关推荐

springboot + Vue 整合阿里云视频点播 | Spring Boot 20
SpringBoot整合阿里云视频点播
文章目录 SpringBoot整合阿里云视频点播 1.准备工作 2.服务端SDK的使用 2.1 导入依赖 2.2 初始化类 2.3 创建读取公共常量的工具类 2.4 获取视频播放地址 2.5 获取视频 ...
阿里云视频点播功能使用
1.开通并且获得密钥和安全密钥 1.开通 1. 2. 3. 4. 2.获得配置参数 1.启用 2.添加转码模组 3.获取AccessKeyId和AccessKey Secret 2.使用 1.下载Ja ...
vue使用阿里云视频点播
vue使用阿里云视频点播--videoId + playauth的方式一. 上传视频官方文档https://help.aliyun.com/document_detail/52204.htm?sp ...
springboot项目整合阿里云oss的内容审核
springboot项目整合阿里云内容审核第一添加依赖 <dependency><groupId>com.aliyun</groupId><artifa ...
springboot整合阿里云视频点播服务Vod——实现视频上传、删除、播放
视频点播(ApsaraVideo VoD,简称VoD)是集视频采集.编辑.上传.媒体资源管理.自动化转码处理(窄带高清™).视频审核分析.分发加速于一体的一站式音视频点播解决方案. 阿里云视频点播服务 ...
Springboot整合阿里云视频点播服务
目录一.阿里云视频点播服务二.开通视频点播云平台 1.搜索视频点播服务 2.开通视频点播 3.选择按使用流量计费三.使用SDK 1.添加Jar包依赖 2.application.properti ...
【springboot】实现阿里云视频点播上传视频
阿里云视频点播 1.开通视频点播服务,选择按流量计费,对于个人项目来说,相当于免费. 2.开启存储管理 3.设置转码模板组.设置加密,如果不加密,别人只要获取到你视频的url就可以免费观看,但进行了加 ...
谷粒学院 —— 10、课程管理：整合阿里云视频点播
目录 1.创建模块 1.1.引入视频点播所需依赖 1.2.application.properties 1.3.启动类 2.实现视频上传 2.1.后端 2.1.1.创建常量类 2.1.2.上传视频到阿 ...

springboot + vue 整合 阿里云 视频点播 功能

阿里云 视频播放操作

1.1、找到视频点播

1.2、进入管理控制台

1.2、开通服务

1.3、选择“按使用流量计费”，开通服务

1.4、开通后，进入管理控制台

1.5、上传音 / 视频

1.6、启用存储地址

1.7、已启用

1.8、选择上传的音频，开始上传

1.9、上传成功

1.10、分类管理

1.11、视频转码

1.12、再上传一个视频，添加转码，分类上传

1.13、上传后，显示转码中，需要一点时间

使用工具类进行视频上传

2.1、引入依赖

2.2、初始化类

2.3、测试类

2.4、运行

2.5、查看云服务器

使用springboot进行上传

3.1、引入依赖（同上）

3.2、配置application文件

3.3、获取配置中的值的Bean

3.4、controller代码

3.5、service代码

3.6、swagger测试

3.7、服务器查看

整合前端进行上传

4.1 有nginx进行反向代理的设置

4.1.1、设置请求转发地址

4.1.2、设置上传文件的大小限制

4.1.3、重启服务

4.2、前端实现-数据定义

4.3、整合上传组件

4.4、方法回调

4.5、页面上传文件

4.6、查看服务器

点击x删除上传

5.1、初始化类

5.2、删除接口

5.3、前端方法

5.4、点击x的事件，对应的方法

5.5、页面效果

5.6、服务器查看，已经删除

springboot + vue 整合 阿里云 视频点播 功能相关推荐

最新文章

热门文章

springboot + vue 整合阿里云视频点播功能

阿里云视频播放操作

springboot + vue 整合阿里云视频点播功能相关推荐