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

一、阿里云视频点播简介

阿里云视频点播（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>

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

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

（二）Spring Boot 后端部分

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()
    },
}

（四）实现效果

==上传视频==>

     ==删除==>       

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

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