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

叁歲伎倆 2024-04-07 16:03 86阅读 0赞

### 阿里云 视频播放操作 ###

##### 1.1、找到视频点播 #####

![在这里插入图片描述][dba56dbe75f74034a3e9396705316b85.png]

##### 1.2、进入管理控制台 #####

![在这里插入图片描述][ffebaa4d6815499ca097f612b7e23917.png]

##### 1.2、开通服务 #####

![在这里插入图片描述][11949de3ed5f4978b4e08b7963d2a48c.png]

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

![在这里插入图片描述][bfbb391e26f944d7b50ac2b5990d241e.png]

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

![在这里插入图片描述][3323be2aa0ce45d19d7bf2247f77a8d7.png]

##### 1.5、上传音 / 视频 #####

![在这里插入图片描述][893746e84a9a4438ac66710f859e1380.png]

##### 1.6、启用存储地址 #####

![在这里插入图片描述][31adbb51a1e04d6fbdc81d82d23ca898.png]

##### 1.7、已启用 #####

![在这里插入图片描述][1f29a402d8254a3a8d7c34639e7f75a8.png]

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

![在这里插入图片描述][cac88b2789f445afb7a7b6620327fa62.png]

##### 1.9、上传成功 #####

![在这里插入图片描述][1416636f2a9e4976bec674e832e76f86.png]

![在这里插入图片描述][58ad01951a904c75a2d829538b3d0020.png]

##### 1.10、分类管理 #####

![在这里插入图片描述][8b1b4181ddc948d9b3dc3c57bbb070eb.png]

##### 1.11、视频转码 #####

![在这里插入图片描述][104f130a8ce74340ad77146d3165c9ec.png]

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

![在这里插入图片描述][1d0c3805aadb4da4897caa8e81d149ac.png]

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

![在这里插入图片描述][3387ff02ee454349bbbb7d9f4f4308d8.png]

### 使用工具类进行视频上传 ###

##### 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和response
            GetPlayInfoRequest request = new GetPlayInfoRequest();
            GetPlayInfoResponse response = new GetPlayInfoResponse();
    
            //向request对象里面设置视频id
            request.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、运行 #####

![在这里插入图片描述][f45a95de3acd4c1fb9af8550aefd11b1.png]

##### 2.5、查看云服务器 #####

![在这里插入图片描述][e3bb2a3057be4c39b430f51d58434a14.png]

### 使用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;
    
        @Override
        public void afterPropertiesSet() throws Exception {
        
            ACCESS_KEY_ID = keyid;
            ACCESS_KEY_SECRET = keysecret;
        }
    }

##### 3.4、controller代码 #####

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

##### 3.5、service代码 #####

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

##### 3.6、swagger测试 #####

![在这里插入图片描述][1c7b9f5c30ee48809c6db170694d7686.png]

##### 3.7、服务器查看 #####

![在这里插入图片描述][a65b9628d31941c69247773cf037b3e2.png]

### 整合前端进行上传 ###

##### 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、页面上传文件 #####

![在这里插入图片描述][4cf135e7747c47c0b188bd6fb0118942.png]

##### 4.6、查看服务器 #####

![在这里插入图片描述][cd865d5546ff4b0d919c326c5562a706.png]

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

##### 5.3、前端方法 #####

![在这里插入图片描述][99a39d671cea45fc8279827c11c93cfc.png]

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

![在这里插入图片描述][6b1ad86ce4424501aa2543ce1ef11e5c.png]

//点击确定调用的方法
     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、页面效果 #####

![在这里插入图片描述][d10abc104c8740858c1ef53fb6ce29eb.png]![在这里插入图片描述][ccaba199f88d41caafd8186a4ccdf4ec.png]

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

![在这里插入图片描述][524bb008ff3c4982b2040fd84dc6c84f.png]

结束！！！！

--------------------

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

[dba56dbe75f74034a3e9396705316b85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/02c5355a2bfd488c889f78ed0c4d39b4.png
[ffebaa4d6815499ca097f612b7e23917.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8669f9e1079c47edaa4fec85d2be26a8.png
[11949de3ed5f4978b4e08b7963d2a48c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/91d016ea7a51444da7a13279587b568d.png
[bfbb391e26f944d7b50ac2b5990d241e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bba6b015b59f41bd8baec68f248c6ff8.png
[3323be2aa0ce45d19d7bf2247f77a8d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2e35ac22bde246048868e77ed22f9fe5.png
[893746e84a9a4438ac66710f859e1380.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/02691d3112614d05a0e7f53a53c26c25.png
[31adbb51a1e04d6fbdc81d82d23ca898.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6d9d86f5bcf049748a8b0bb0769546b0.png
[1f29a402d8254a3a8d7c34639e7f75a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bbb49d096520446488a2fcadbdfe15f4.png
[cac88b2789f445afb7a7b6620327fa62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8bde3499a3984afbafc3d83eb5627487.png
[1416636f2a9e4976bec674e832e76f86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f386ee1d0c1b4c41aec25012edf666c2.png
[58ad01951a904c75a2d829538b3d0020.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ff98b0e32b3f4aca9180ccf96085158d.png
[8b1b4181ddc948d9b3dc3c57bbb070eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2db6acb35260440f8a0ad790a156d17f.png
[104f130a8ce74340ad77146d3165c9ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/33807a47d5654ec1831273eb54cb0c72.png
[1d0c3805aadb4da4897caa8e81d149ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/431a8f29be4947cf8dec134ead1c7123.png
[3387ff02ee454349bbbb7d9f4f4308d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d088fb63dfc744ee9894857ec82db0bd.png
[f45a95de3acd4c1fb9af8550aefd11b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/557898dc76894f0195d78c01fe0e3df7.png
[e3bb2a3057be4c39b430f51d58434a14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9acaf99ac8d44d5089580878c98ddf7c.png
[1c7b9f5c30ee48809c6db170694d7686.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8f76ca55cd32450195068166c4d71ce9.png
[a65b9628d31941c69247773cf037b3e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0913be65a7614ca08e35398e2ab7de8c.png
[4cf135e7747c47c0b188bd6fb0118942.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0ab1a3063681412990ba517422e83aa6.png
[cd865d5546ff4b0d919c326c5562a706.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1ff019a88cc146ef9ade4ec15217dcd6.png
[99a39d671cea45fc8279827c11c93cfc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7030f7c2594e4a2fa5050b01e13f3469.png
[6b1ad86ce4424501aa2543ce1ef11e5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6452bbf6c88c45b8980cc93414bf62bd.png
[d10abc104c8740858c1ef53fb6ce29eb.png]: https://img-blog.csdnimg.cn/d10abc104c8740858c1ef53fb6ce29eb.png
[ccaba199f88d41caafd8186a4ccdf4ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/766c948652ec41b085eae20c335bc8ff.png
[524bb008ff3c4982b2040fd84dc6c84f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ab25a066c2eb4cc981ae603b758076da.png