栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Vue+java:阿里云OSS 实现视频上传,前端Vue使用vueMiniPlayer动态地址视频播放,以及发布时遇到aliyun-java-vod-upload时依赖报错问题的解决方法

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue+java:阿里云OSS 实现视频上传,前端Vue使用vueMiniPlayer动态地址视频播放,以及发布时遇到aliyun-java-vod-upload时依赖报错问题的解决方法

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

实现过程参考了一些文档以及文章,以上可能会存在没记录到的地方,如果文章中存在问题,欢迎评论区指出。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/880446.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号