1. 阿里云OSS视频上传功能
首先,服务器需要开通视频点播的功能。
我使用的java开发,阿里云官方文档地址:阿里云官方SDK示例
(1)vue视频上传的关键代码
上传
JS关键代码:
(2) java后端:可参考阿里云OSS官方文档
controller的完整方法:(顺带了通过videoId获取播放地址的方法)
//上传视频到阿里云 上传到的是默认地区:华东2(上海)
@AutoLog(value = "上传视频到阿里云 返回视频播放地址")
@ApiOperation(value = "上传视频到阿里云 返回视频播放地址", notes = "上传视频到阿里云 返回视频播放地址")
@PostMapping("/uploadAlyiVideo")
public Result uploadAlyiVideo(@RequestParam("file") MultipartFile file) {
Result result = new Result<>();
try {
log.info("n【视频上传】 文件名:{} , 大小:{}", file.getOriginalFilename(), file.getSize() / 1024 < 1024 ? String.format("%sKB", file.getSize() / 1024) : String.format("%sMB", file.getSize() / 1024 / 1024));
//返回上传视频id 带到页面上作为视频对象的id
String videoId = voteVideoService.uploadVideoAly(file);
if (videoId != null) {
List list = (List) getPlayAuth(videoId).getResult();
//返回视频播放地址
String videoUrl = list.get(0).getPlayURL();
result.setResult(videoUrl);
result.setMessage(videoUrl.toString());
result.setSuccess(true);
log.info("n【视频上传】 获取视频基础信息-视频地址 {}", videoUrl);
} else {
log.info("n【视频上传】 上传失败");
result.setMessage("上传失败!");
result.setSuccess(false);
}
} catch (Exception ex) {
ex.printStackTrace();
}
return result;
}
@AutoLog(value = "阿里云-根据视频id获取视频地址")
@ApiOperation(value = "阿里云-根据视频id获取视频地址", notes = "阿里云-根据视频id获取视频地址")
@GetMapping("/getPlayAuth")
public Result> getPlayAuth(@RequestParam(name = "id") String id) {
DefaultAcsClient client = initVodClient();
GetPlayInfoResponse response = new GetPlayInfoResponse();
List playInfoList = new ArrayList<>();
try {
response = getPlayInfo(client, id);
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");
return Result.OK(playInfoList);
}
public static GetPlayInfoResponse getPlayInfo(DefaultAcsClient client, String id) throws Exception {
GetPlayInfoRequest request = new GetPlayInfoRequest();
request.setVideoId(id);
return client.getAcsResponse(request);
}
@PostConstruct
public DefaultAcsClient initVodClient() {
try {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
serviceImpl的完整方法:
@Override
public String uploadVideoAly(MultipartFile file) {
try {
String fileName = file.getOriginalFilename();
log.info("n {} ", file.getOriginalFilename());
String title = fileName.substring(0, fileName.lastIndexOf("."));
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 {
videoId = response.getVideoId();
log.info(" ErrorCode: {}, ErrorMessage: {} ,VideoId: {}", new Object[] { response.getCode(), response.getMessage(), response.getVideoId() });
}
log.info("n {} , videoId: {}", file.getOriginalFilename(), videoId);
return videoId;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
2. Vue 视频播放功能:使用vueMiniPlayer
vue-mini-player安装命令:
npm install vue-mini-player -S
完整的播放页面:vueMiniPlayer
使用阿里云的视频截帧功能给cover赋值:阿里云视频截帧功能文档
引入播放的页面关键代码:使用v-bind使用数据传递
3. 打包过程中:aliyun-java-vod-upload依赖报错,需要使用本地依赖包
maven使用的阿里云仓库,setting中:
aliyunmaven 阿里云公共仓库 * https://maven.aliyun.com/repository/public
设置本地仓库地址:【对应到自己的仓库地址】
D:apache-maven-3.6.1-depository
将aliyun-java-vod-upload-1.4.14.jar执行加载到本地仓库,然后正常的使用package命令打包
cmd窗口运行以下命令:
mvn install:install-file -Dfile=aliyun-java-vod-upload-1.4.14.jar -DgroupId=com.aliyun -DartifactId=aliyun-java-vod-upload -Dversion=1.4.14 -Dpackaging=jar
实现过程参考了一些文档以及文章,以上可能会存在没记录到的地方,如果文章中存在问题,欢迎评论区指出。



