【Spring Boot 20】Spring Boot + Vue 整合阿里云视频点播

我会带着你远行 2021-08-31 15:38 667阅读 0赞

# 一、阿里云视频点播简介 #

阿里云视频点播（VOD）是集音视频上传、自动化转码处理、媒体资源管理、分发加速于一体的全链路音视频点播服务。借助灵活、可伸缩的存储、处理及内容分发服务，帮助企业和开发者快速搭建安全、弹性、高可定制的点播平台和应用，提供端到端的完整解决方案。

阿里云视频点播整体服务构建在阿里云强大的基础设施服务之上，提供端到端的视频全链路服务，帮助企业和开发者快速搭建安全、弹性、高可定制的视频点播平台和应用。提供Web管理控制台和软件开发工具包（API+SDK，包括视频上传、播放器等）。您可以通过它们使用和管理视频点播服务（视频审核、云剪辑），也可以与您自己的应用和服务集成。

作为国内领先的短视频服务商，短视频SDK提供了视频录制、导入裁剪压缩、视频特效编辑等功能，具备美颜、人脸识别+AR贴纸、变速录制、实时混音、多视频拼接、实时滤镜、动图、音乐、MV、字幕、涂鸦等主流的短视频功能。您可以根据自己的需求和业务场景，选择低成本的基础版或标准版，在App中快速集成短视频功能。您也可以选择具有更强大视频编辑功能的专业版，通过自行定制交互和界面，充分与业务整合，快速实现差异化的短视频业务。

所有服务按使用付费，服务能力自动伸缩，告别复杂的架构设计和编程开发，维护成本几近于零，您可以专注于实现业务逻辑及提升最终用户体验。

Spring Boot + Vue 整合阿里云视频点播

# 二、阿里云视频点播的优势 #

## 1、灵活简单易用 ##

*  点播场景完整支持，简单易用的控制台，并提供丰富的SDK及开放API，支持定制的开发需求;
 *  按使用付费，服务能力自动伸缩，维护成本几近于零，您可专注于业务实现及最终的用户体验。

## 2、领先转码技术 ##

*  窄带高清和H.265技术，提供更佳画质、更低码率的自适应转码输出;
 *  高速稳定的并行转码系统，转码任务规模无缝扩展，保障视频转码质量和效率。

## 3、极致播放体验 ##

*  多码率、多清晰度、多格式的差异化视频流，满足全终端的播放需求;
 *  跨运营商、跨地域全网覆盖的视频分发网络，提供更稳定、更流畅的视听体验。

## 4、酷炫视频玩法 ##

*  快速集成短视频录制编辑功能，可按模块组合使用，多分辨率支持，UI自定义;
 *  实时滤镜、人脸贴图等前卫玩法应有尽有。

## 5、多重服务保障 ##

*  高可靠的云存储服务保障海量音视频永久安全存储;
 *  灵活定制的防盗链和播放鉴权功能保障媒体资源安全;
 *  完善的监控体系&服务体系，7\*24小时为点播服务保驾护航。

# 三、Spring Boot + Vue 整合阿里云视频点播 #

## （一）引入依赖 ##

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <parent>
            <artifactId>service</artifactId>
            <groupId>com.atguigu</groupId>
            <version>0.0.1-SNAPSHOT</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <artifactId>service_vod</artifactId>
        <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.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>
    </project>

这里需要注意的是 aliyun-java-sdk-vod 飘红问题，aliyun-java-sdk-vod 没有开源，所以不能直接在pom文件中直接引用依赖。

### 通常情况下： ###

1、下载aliyun-sdk-vod-upload.jar

2、将测试样例解压，进入lib目录下，在命令行执行下面的命令

> mvn install:install-file -DgroupId=com.aliyun -DartifactId=aliyun-sdk-vod-upload -Dversion=1.4.12 -Dpackaging=jar -Dfile=aliyun-java-vod-upload-1.4.12.jar

在pom文件中引入该依赖即可

<dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>aliyun-sdk-vod-upload</artifactId>
        <version>1.4.12</version>
     </dependency>

但有的时候确实不好使，小编就是这样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70][]

### 我的解决办法（直接导入jar包！！！）： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1][]

## （二）Spring Boot 后端部分 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2][]

### 1、配置文件application.properties ###

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

### 2、controller ###

package com.atguigu.vod.controller;
    
    import com.aliyuncs.DefaultAcsClient;
    import com.aliyuncs.vod.model.v20170321.DeleteVideoRequest;
    import com.atguigu.commonutils.R;
    import com.atguigu.commonutils.exceptionhandler.GuliException;
    import com.atguigu.vod.Utils.ConstantVodUtils;
    import com.atguigu.vod.Utils.InitVodCilent;
    import com.atguigu.vod.service.VodService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.util.List;
    
    @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);
        }
    
        //根据视频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,"删除视频失败");
            }
        }
    
        //删除多个阿里云视频的方法
        //参数多个视频id  List videoIdList
        @DeleteMapping("delete-batch")
        public R deleteBatch(@RequestParam("videoIdList") List<String> videoIdList) {
            vodService.removeMoreAlyVideo(videoIdList);
            return R.Ok();
        }
    }

### 3、service ###

package com.atguigu.vod.service;
    
    import org.springframework.web.multipart.MultipartFile;
    
    import java.util.List;
    
    public interface VodService {
        //上传视频到阿里云
        String uploadVideoAly(MultipartFile file);
    
        void removeMoreAlyVideo(List<String> videoIdList);
    }

package com.atguigu.vod.service.impl;
    
    import com.aliyun.vod.upload.impl.UploadVideoImpl;
    import com.aliyun.vod.upload.req.UploadStreamRequest;
    import com.aliyun.vod.upload.resp.UploadStreamResponse;
    import com.aliyuncs.DefaultAcsClient;
    import com.aliyuncs.vod.model.v20170321.DeleteVideoRequest;
    import com.atguigu.commonutils.R;
    import com.atguigu.commonutils.exceptionhandler.GuliException;
    import com.atguigu.vod.Utils.ConstantVodUtils;
    import com.atguigu.vod.Utils.InitVodCilent;
    import com.atguigu.vod.service.VodService;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.stereotype.Service;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.InputStream;
    import java.util.ArrayList;
    import java.util.List;
    
    @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;
            }
        }
    
        @Override
        public void removeMoreAlyVideo(List videoIdList) {
            try {
                //初始化对象
                DefaultAcsClient client = InitVodCilent.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
                //创建删除视频request对象
                DeleteVideoRequest request = new DeleteVideoRequest();
    
                //videoIdList值转换成 1,2,3
                String videoIds = StringUtils.join(videoIdList.toArray(), ",");
    
                //向request设置视频id
                request.setVideoIds(videoIds);
                //调用初始化对象的方法实现删除
                client.getAcsResponse(request);
            }catch(Exception e) {
                e.printStackTrace();
                throw new GuliException(20001,"删除视频失败");
            }
        }
    }

### 4、utils ###

package com.atguigu.vod.Utils;
    
    import com.aliyun.oss.ClientException;
    import com.aliyuncs.DefaultAcsClient;
    import com.aliyuncs.profile.DefaultProfile;
    
    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;
        }
    }

package com.atguigu.vod.Utils;
    
    import org.springframework.beans.factory.InitializingBean;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Component;
    
    @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;
        }
    }

## （三）Vue前端部分 ##

### 1、template部分 ###

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

### 2、data部分 ###

data() {
        return {
            video: {
                title: '',
                sort: 0,
                free: 0,
                videoSourceId: '',
                videoOriginalName:''//视频名称
            },
            fileList: [],//上传文件列表
            BASE_API: process.env.BASE_API // 接口API地址
        }
    },

### 3、methods部分 ###

methods:{
        //点击确定调用的方法
        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 }？`);
        },
        //上传视频成功调用的方法
        handleVodUploadSuccess(response, file, fileList) {
            //上传视频id赋值
            this.video.videoSourceId = response.data.videoId
            //上传视频名称赋值
            this.video.videoOriginalName = file.name
        },
        handleUploadExceed() {
            this.$message.warning('想要重新上传视频，请先删除已上传的视频')
        },
        //==============================小节操作====================================
        //删除小节
        removeVideo(id) {
            this.$confirm('此操作将删除小节, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定，执行then方法
                //调用删除的方法
                video.deleteVideo(id)
                    .then(response =>{//删除成功
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '删除小节成功!'
                    });
                    //刷新页面
                    this.getChapterVideo()
                })
            }) //点击取消，执行catch方法
        },
        //添加小节弹框的方法
        openVideo(chapterId) {
            //弹框
            this.dialogVideoFormVisible = true
            //设置章节id
            this.video.chapterId = chapterId
        },
        //添加小节
        addVideo() {
            //设置课程id
            this.video.courseId = this.courseId
            video.addVideo(this.video)
                .then(response => {
                    //关闭弹框
                    this.dialogVideoFormVisible = false
                    //提示
                    this.$message({
                        type: 'success',
                        message: '添加小节成功!'
                    });
                    //刷新页面
                    this.getChapterVideo()
                })
        },
        saveOrUpdateVideo() {
            this.addVideo()
        },
    }

## （四）实现效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 3][]

**==上传视频==>**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 5][]     **==删除==>     **  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 6][]

上一篇：[瞧不起CRUD？Vue 神带你领略王者级CRUD程序媛的风采][CRUD_Vue _CRUD]

下一篇：[上云就上阿里云，提升CRUD程序媛B格必备技能！][CRUD_B]

![20200711011900969.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70]: /images/20210813/e8bea8c6801943e0b7cb6f7564283ada.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1]: /images/20210813/a581e3adcfc04ed18422103aa658fbb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2]: /images/20210813/8c039c497cd4493790e7b1c84f400f19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 3]: /images/20210813/94d517d3f9c24a45b1478bb4da7e5463.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 4]: /images/20210813/8025a7459f1e4ddfb1a5aceae2a14707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200711010657572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 6]: /images/20210813/d192db061bdb4bdf9597baac9c1cd8f2.png
[CRUD_Vue _CRUD]: https://blog.csdn.net/guorui_java/article/details/107010007
[CRUD_B]: https://blog.csdn.net/guorui_java/article/details/107010852
[20200711011900969.jpg]: /images/20210813/1f0ea9b2c4144250b779cdceadd595ac.png