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

1. 阿里云OSS视频上传功能
首先，服务器需要开通视频点播的功能。
我使用的java开发，阿里云官方文档地址：阿里云官方SDK示例
（1）vue视频上传的关键代码

  <a-upload
                name='file'
                :headers='headers'
                :multiple='false'
                :action='uploadAction'
                :file-list='fileList'
                @change='handleChange'
                :before-upload='beforeUpload'
                :remove='doRemove'
              >
                <a-button>
                  <a-icon type='upload'/>
                  上传
                </a-button>
  </a-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JS关键代码：

<script>
  import {httpAction,uploadAction} from '@/api/manage'
  import Vue from 'vue'
  import {ACCESS_TOKEN} from '@/store/mutation-types'

  export default {
   name: 'VoteVideoForm',
    components: {},
    props: {},
    data() {
      return {
        model: {
          videoUrl: '',
        },
        uploadAction: window._CONFIG['domianURL'] + '/vote/voteVideo/uploadAlyiVideo',
        fileList: []
   		}
    },
 
    methods: {
      /**
       * 选择文件
       * @param info
       * @returns {boolean}
       */
      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log('上传中')
        }
        if (info.file.status === 'done') {
          console.log('完成', info.file)
        }
        if (info.file.status === 'error') {
          console.log('失败', info.file)
        }
        return true
      },

      /**
       * 上传文件
       * @param file
       * @returns {boolean}
       */
      beforeUpload(file) {
        //置空
        let fileObj = {
          uid: '-1',
          name: file.name,
          status: 'uploading',
          url: ''
        }
        this.fileList = [fileObj]

        let that = this
        let formData = new FormData()
        formData.append('file', file)
        uploadAction(this.uploadAction, formData).then(res => {
          if (res.success) {
            // const data = JSON.parse(res.result)
            const data = res.result
            fileObj.status = 'done'
            fileObj.url = 'videoUrl'
            that.fileList = [fileObj]
            that.model.videoUrl = data
          } else {
            fileObj.status = 'error'
            that.fileList = [fileObj]
          }
        }).catch(err => {
          fileObj.status = 'error'
          that.fileList = [fileObj]
        })
        return false
      },

      /**
       * 删除文件
       * @param file
       * @returns {boolean}
       */
      doRemove() {
        this.fileList = []
        this.model.videoUrl = ''
        return true
      }
    }
  }
</script> 
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

（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<GetPlayInfoResponse.PlayInfo> list = (List<GetPlayInfoResponse.PlayInfo>) 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;
	 }
	 
	 /**
	  * 阿里云 根据视频id获取视频地址
	  */
	 @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<GetPlayInfoResponse.PlayInfo> 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;
	 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

serviceImpl的完整方法:

 /**
     * 阿里云视频点播 上传
     *
     * @param file
     * @return
     */
    @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;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2. Vue 视频播放功能：使用vueMiniPlayer

vue-mini-player安装命令：

npm install vue-mini-player -S
1

完整的播放页面：vueMiniPlayer
使用阿里云的视频截帧功能给cover赋值：阿里云视频截帧功能文档

<template>
  <div class="video_play">
    <vueMiniPlayer
      ref="vueMiniPlayer"
      :video="video"
      :mutex="true"
      @fullscreen="handleFullscreen"
    />
  </div>
</template>

<script>
  import Vue from 'vue'
  import vueMiniPlayer from 'vue-mini-player'
  import 'vue-mini-player/lib/vue-mini-player.css'
  Vue.use(vueMiniPlayer)

  export default {
    name: "myVidePlayer",
    components: {
    },
    props: {
      info:{           //这个就是父组件中子标签自定义名字
        type:Object,
        required:true
      }
    },
    data() {
      return {
        video: {
          url: this.info.videoUrl,
           cover: this.info.videoUrl+"?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast", 
           muted: false, // 是否静音播放
          loop: false, // 视频是否循环播放
          preload: 'auto', // 视频预加载
          poster: '', // 原生视频默认海报暂不设置
          volume: 1, // 默认音量
          autoplay: false, // 视频自动播放
        }
      }
    },
    watch: {},
    mounted() {},
    created: function () {},
    methods: {
      handleFullscreen() {}
    }
  }
</script>

<style scoped lang="less">
  .video_play{
    width: 100%;
    height:100%;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

引入播放的页面关键代码：使用v-bind使用数据传递

  <template>
 	   <div class="small_div" v-for="(item , index) in list" :key="index">
            <div class="video_play">
              <VideoPlayer v-bind:info="item"/>
            </div>
     </div>
</template>

<script>
  import {getVoteActivity, getVotes, addVotesTicket} from "@/api/manage";
  import VideoPlayer from '@/views/base/VideoPlayer'
  import 'vue-mini-player/lib/vue-mini-player.css'
export default {
    name: "BaseIndex",
    components: {
      VideoPlayer
    },
    data() {
      return {
     	list: [],
     }
   },
   mounted() {
      this.getVotes();
    },
    methods: {
    //获取视频列表
      getVotes() {
        const that = this
        getVotes().then(res => {
          //console.log("查询", res)
          const result = res.result
          that.list = result;
        })
      },
    }
 }
 </script>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

3. 打包过程中：aliyun-java-vod-upload依赖报错，需要使用本地依赖包
maven使用的阿里云仓库，setting中：

 <mirror>
      <id>aliyunmaven</id>
      <name>阿里云公共仓库</name>
      <mirrorOf>*</mirrorOf>
      <url>https://maven.aliyun.com/repository/public</url>
    </mirror>
1
2
3
4
5
6

设置本地仓库地址：【对应到自己的仓库地址】

<localRepository>D:\apache-maven-3.6.1-depository</localRepository>
1

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

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