day09项目【课程列表和整合阿里云视频点播】

作者: 刊ing | 来源:发表于2020-07-10 19:15 被阅读0次

day09项目【课程列表和整合阿里云视频点播】
视频播放器，一个值得学习的springboot项目
.Net Core MVC使用阿里云Vod视频点播批量上传视频
3. Aliplayer视频点播加密播放
http开头的视频Url如何变为https
day06项目【整合阿里云OSS和Excel导入分类】
如何去选择最适合自己的云服务器的视频
laravel队列获取阿里云视频点播服务视频时长报错Undefi
畅聊视频点播与媒体转码工作流
阿里云视频点播服务接口对接总结 C# 2021-01-30

1 课程列表和课程删除

01-课程列表的显示

课程列表显示：

课程列表（参考讲师列表，完善条件查询和分页）：

一、后端实现

1、定义搜索对象

CourseQuery：

@ApiModel(value = "Course查询对象", description = "课程查询对象封装")

@Data

public class CourseQuery {

@ApiModelProperty(value = "课程名称")

private String title;

@ApiModelProperty(value = "讲师id")

private String teacherId;

@ApiModelProperty(value = "一级类别id")

private String subjectParentId;

@ApiModelProperty(value = "二级类别id")

private String subjectId;

}

2、定义web层方法

//条件查询带分页的方法

@ApiOperation(value = "分页课程列表")

@PostMapping("pageCourseCondition/{current}/{limit}")

public R pageCourseCondition(@ApiParam(name = "current", value = "当前页码", required = true) @PathVariable long current,

@ApiParam(name = "limit", value = "每页记录数", required = true) @PathVariable long limit,

@RequestBody(required = false) CourseQuery courseQuery){

//创建page对象

Page<EduCourse> pageParam = new Page<>(current,limit);

courseService.pageQuery(pageParam,courseQuery);

List<EduCourse> records = pageParam.getRecords();

long total = pageParam.getTotal();

//调用方法实现条件查询分页

return R.ok().data("rows",records).data("total",total);

}

3、定义service方法

接口

void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery);

实现

@Override

public void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery) {

//构建条件

QueryWrapper<EduCourse> courseQueryWrapper = new QueryWrapper<>();

courseQueryWrapper.orderByDesc("gmt_create");

//wrapper

if (courseQuery == null){

baseMapper.selectPage(pageParam,courseQueryWrapper);

return;

}

String title = courseQuery.getTitle();

String teacherId = courseQuery.getTeacherId();

String subjectParentId = courseQuery.getSubjectParentId();

String subjectId = courseQuery.getSubjectId();

if (!StringUtils.isEmpty(title)){

courseQueryWrapper.like("title",title);

}

if (!StringUtils.isEmpty(teacherId)){

courseQueryWrapper.eq("teacher_id",teacherId);

}

if (!StringUtils.isEmpty(subjectParentId)){

courseQueryWrapper.eq("subject_parent_id",subjectParentId);

}

if (!StringUtils.isEmpty(subjectId)){

courseQueryWrapper.eq("subject_id",subjectId);

}

baseMapper.selectPage(pageParam,courseQueryWrapper);

}

二、前端分页查询列表

1、定义api

course.js

//课程列表（条件查询分页）

    //current当前页，limit每页记录数，teacherQuery条件对象

    getCoursePageList(current,limit,courseQuery){

        return request({

            url:`/eduservice/course/pageCourseCondition/${current}/${limit}`,

            method:'post',

            data:courseQuery

        })

    }

2、组件中的js

src/views/edu/list.vue

<script>

import course from '@/api/edu/course'

import teacher from '@/api/edu/teacher'

import subject from '@/api/edu/subject'

export default {

    data(){

        return {

            listLoading: true, // 是否显示loading信息

            list:null,

            page:1,//当前页

            limit:10,//每页记录数

            total:0,//总记录数

            courseQuery:{},//条件封装对象

            teacherList: [], // 讲师列表

            subjectNestedList: [], // 一级分类列表

            subSubjectList: [] // 二级分类列表,

        }

    },

    created(){

        this.getList()

        // 初始化分类列表

        this.initSubjectList()

        // 获取讲师列表

        this.initTeacherList()

    },

    methods:{

        getList(page=1) {

            this.page = page

            this.listLoading = true

            course.getCoursePageList(this.page,this.limit,this.courseQuery)

                .then(response=>{

                    if (response.success === true) {

                        this.list = response.data.rows

                        this.total = response.data.total

                    }

                    this.listLoading = false

                })

                .catch(error =>{//请求失败

                    console.log(error)

                })

        },

        initTeacherList() {

            teacher.getTeacherList()

                .then(response => {

                    this.teacherList = response.data.items

                })

        },

        initSubjectList() {

            subject.getSubjectList()

                .then(response => {

                    this.subjectNestedList = response.data.list

                })

        },

        subjectLevelOneChanged(value){

            for (let i = 0; i < this.subjectNestedList.length; i++) {

                    if (this.subjectNestedList[i].id === value) {

                    this.subSubjectList = this.subjectNestedList[i].children

                    this.searchObj.subjectId = ''

                    }

                }

        },

        resetData(){//清空方法

            //表单输入项数据清空

            this.courseQuery = {}

            this.subSubjectList = [] // 二级分类列表

            //查询所有讲师数据

            this.getList()

        },

    }

}

</script>

3、组件模板

查询表单、表格和分页：表格添加了 row-class-name="myClassList" 样式定义

<template>

    <div class="app-container">

        

        <el-form :inline="true" class="demo-form-inline">

        

        

        <el-form-item label="课程类别">

            <el-select

            v-model="courseQuery.subjectParentId"

            placeholder="请选择"

            @change="subjectLevelOneChanged">

            <el-option

                v-for="subject in subjectNestedList"

                :key="subject.id"

                :label="subject.title"

                :value="subject.id"/>

            </el-select>

            

            <el-select v-model="courseQuery.subjectId" placeholder="请选择">

            <el-option

                v-for="subject in subSubjectList"

                :key="subject.id"

                :label="subject.title"

                :value="subject.id"/>

            </el-select>

        </el-form-item>

        

        <el-form-item>

            <el-input v-model="courseQuery.title" placeholder="课程标题"/>

        </el-form-item>

        

        <el-form-item>

            <el-select

            v-model="courseQuery.teacherId"

            placeholder="请选择讲师">

            <el-option

                v-for="teacher in teacherList"

                :key="teacher.id"

                :label="teacher.name"

                :value="teacher.id"/>

            </el-select>

        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>

        <el-button type="default" @click="resetData()">清空</el-button>

        </el-form>

        

        <el-table

            v-loading="listLoading"

            :data="list"

            element-loading-text="数据加载中"

            border

            fit

            highlight-current-row

            row-class-name="myClassList">

            <el-table-column

                label="序号"

                width="70"

                align="center">

                <template slot-scope="scope">

                {{ (page - 1) * limit + scope.$index + 1 }}

                </template>

            </el-table-column>

            <el-table-column label="课程信息" width="470" align="center">

                <template slot-scope="scope">

                <div class="info">

                    <div class="pic">

                        <img :src="scope.row.cover" alt="scope.row.title" width="150px">

                    </div>

                    <div class="title">

                    <a href="">{{ scope.row.title }}</a>

                    <p>{{ scope.row.lessonNum }}课时</p>

                    </div>

                </div>

                </template>

            </el-table-column>

            <el-table-column label="创建时间" align="center">

                <template slot-scope="scope">

                {{ scope.row.gmtCreate.substr(0, 10) }}

                </template>

            </el-table-column>

            <el-table-column label="发布时间" align="center">

                <template slot-scope="scope">

                {{ scope.row.gmtModified.substr(0, 10) }}

                </template>

            </el-table-column>

            <el-table-column label="价格" width="100" align="center" >

                <template slot-scope="scope">

                {{ Number(scope.row.price) === 0 ? '免费' :

                '¥' + scope.row.price.toFixed(2) }}

                </template>

            </el-table-column>

            <el-table-column prop="buyCount" label="付费学员" width="100" align="center" >

                <template slot-scope="scope">

                {{ scope.row.buyCount }}人

                </template>

            </el-table-column>

            <el-table-column label="操作" width="150" align="center">

                <template slot-scope="scope">

                <router-link :to="'/edu/course/info/'+scope.row.id">

                    <el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>

                </router-link>

                <router-link :to="'/edu/course/chapter/'+scope.row.id">

                    <el-button type="text" size="mini" icon="el-icon-edit">编辑课程大纲</el-button>

                </router-link>

                <el-button type="text" size="mini" icon="el-icon-delete">删除</el-button>

                </template>

            </el-table-column>

        </el-table>

        

        <el-pagination

        :current-page="page"

        :page-size="limit"

        :total="total"

        style="padding: 30px 0; text-align: center;"

        layout="total, prev, pager, next, jumper"

        @current-change="getList"

        />

    </div>

</template>

4、css的定义

<style scoped>

.myClassList .info {

    width: 450px;

    overflow: hidden;

}

.myClassList .info .pic {

    width: 150px;

    height: 90px;

    overflow: hidden;

    float: left;

}

.myClassList .info .pic a {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

.myClassList .info .pic img {

    display: block;

    width: 100%;

}

.myClassList td .info .title {

    width: 280px;

    float: right;

    height: 90px;

}

.myClassList td .info .title a {

    display: block;

    height: 48px;

    line-height: 24px;

    overflow: hidden;

    color: #00baf2;

    margin-bottom: 12px;

}

.myClassList td .info .title p {

    line-height: 20px;

    margin-top: 5px;

    color: #818181;

}

</style>

分页失败原因：

测试：

编辑：即可完成点击“编辑课程信息”和“编辑课程大纲”跳转到相应的页面进行编辑

02-删除课程

一、后端实现

1、web层

定义删除api方法:EduCourseController.java

//根据ID删除课程

@ApiOperation(value = "根据ID删除课程")

@DeleteMapping("deleteCourse/{courseId}")

public R deleteCourse(@ApiParam(name = "id", value = "课程ID", required = true)

@PathVariable String courseId){

courseService.removeCourse(courseId);

return R.ok();

}

2、service层

如果用户确定删除，则首先删除video记录，然后删除chapter记录，最后删除Course记录

//当前在课程实现类EduCourseServiceImpl中，删除小节和章节需要在其实现类中删除，因此首先将相关的Service进行注入

@Autowired

private EduVideoService videoService;

@Autowired

private EduChapterService chapterService;

2.1、在VideoService中定义根据courseId删除video业务方法

接口：

void removeVideoByCourseId(String courseId);

实现：

// 1 根据课程id删除小节

//TODO 删除小节，删除对应视频文件

@Override

public void removeVideoByCourseId(String courseId) {

//需要根据小节id进行删除，但是传递过来的是课程id，因此需要传递对象

QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();

wrapper.eq("course_id",courseId);

baseMapper.delete(wrapper);

}

2.2、在ChapterService中定义根据courseId删除chapter业务方法

接口：

void removeChapterByCourseId(String courseId);

实现：

//根据课程id删除章节

@Override

public void removeChapterByCourseId(String courseId) {

QueryWrapper<EduChapter> wrapper = new QueryWrapper<>();

wrapper.eq("course_id",courseId);

baseMapper.delete(wrapper);

}

2.3、删除当前course记录

接口：CourseService.java

//根据ID删除课程

void removeCourse(String courseId);

实现：CourseServiceImpl.java

//根据ID删除课程

@Override

public void removeCourse(String courseId) {

//1 根据课程id删除小节

videoService.removeVideoByCourseId(courseId);

//2 根据课程id删除章节

chapterService.removeChapterByCourseId(courseId);

//3 根据课程id删除描述

courseDescriptionService.removeById(courseId);

//4 根据课程id删除课程本身

int result = baseMapper.deleteById(courseId);

if(result == 0) { //失败返回

throw new GuliException(20001,"删除失败");

}

}

测试：

测试删除失败：

成功：

二、前端实现

删除按钮（完善）：

1、定义api

course.js中添加删除方法

     //根据ID删除课程

    removeById(courseId){

        return request({

            url:`/eduservice/course/deleteCourse/${courseId}`,

            method:'delete'

        })

    }

2、修改删除按钮

src/api/edu/course.js 删除按钮注册click事件

<el-button type="text" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>

3、编写删除方法

removeDataById(id){

            // debugger

            this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {

                confirmButtonText: '确定',

                cancelButtonText: '取消',

                type: 'warning'

            }).then(() => {

                return course.removeById(id)

            }).then(() => {

                this.getList()

                this.$message({

                    type: 'success',

                    message: '删除成功!'

                })

            }).catch((response) => { // 失败

                if (response === 'cancel') {

                    this.$message({

                        type: 'info',

                        message: '已取消删除'

                    })

                }

            })

        },

2 阿里云视频点播

01-视频点播简介

一、阿里云视频点播技术能力盘点

参考文章：

https://blog.csdn.net/qq_33857573/article/details/79564255

视频点播（ApsaraVideo for VoD）是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速于一体的一站式音视频点播解决方案。

1、应用场景

音视频网站：无论是初创视频服务企业，还是已拥有海量视频资源，可定制化的点播服务帮助客户快速搭建拥有极致观看体验、安全可靠的视频点播应用。

短视频：集音视频拍摄、特效编辑、本地转码、高速上传、自动化云端转码、媒体资源管理、分发加速、播放于一体的完整短视频解决方案。目前已帮助1000+APP快速实现手机短视频功能。

直播转点播：将直播流同步录制为点播视频，用于回看。并支持媒资管理、媒体处理（转码及内容审核/智能首图等AI处理）、内容制作（云剪辑）、CDN分发加速等一系列操作。

在线教育：为在线教育客户提供简单易用、安全可靠的视频点播服务。可通过控制台/API等多种方式上传教学视频，强大的转码能力保证视频可以快速发布，覆盖全网的加速节点保证学生观看的流畅度。防盗链、视频加密等版权保护方案保护教学内容不被窃取。

视频生产制作：提供在线可视化剪辑平台及丰富的OpenAPI，帮助客户高效处理、制作视频内容。除基础的剪切拼接、混音、遮标、特效、合成等一系列功能外，依托云剪辑及点播一体化服务还可实现标准化、智能化剪辑生产，大大降低视频制作的槛，缩短制作时间，提升内容生产效率。

内容审核：应用于短视频平台、传媒行业审核等场景，帮助客户从从语音、文字、视觉等多维度精准识别视频、封面、标题或评论的违禁内容进行AI智能审核与人工审核。

2、功能介绍

二、开通视频点播云平台

1、选择视频点播服务

产品->企业应用->视频云->视频点播

2、开通视频点播

3、选择按使用流量计费

4、资费说明

https://www.aliyun.com/price/product?spm=a2c4g.11186623.2.12.7fbd59b9vmXVN6#/vod/detail

后付费

套餐包

欠费说明

计费案例：https://help.aliyun.com/document_detail/64032.html?spm=a2c4g.11186623.4.3.363db1bcfdvxB5

5、整体流程

使用视频点播实现音视频上传、存储、处理和播放的整体流程如下：

用户获取上传授权。

VoD下发上传地址和凭证及 VideoId。

用户上传视频保存视频ID(VideoId)。

用户服务端获取播放凭证。

VoD下发带时效的播放凭证。

用户服务端将播放凭证下发给客户端完成视频播放。

三、视频点播服务的基本使用

完整的参考文档

https://help.aliyun.com/product/29932.html?spm=a2c4g.11186623.6.540.3c356a58OEmVZJ

1、设置转码格式

选择全局设置 > 转码设置，单击添加转码模板组。

在视频转码模板组页面，根据业务需求选择封装格式和清晰度。

或直接将已有的模板设置为默认即可

2、分类管理

选择全局设置 > 分类管理

3、上传视频文件

选择媒资库 > 音视频，单击上传音视频

4、配置域名

音视频上传完成后，必须配一个已备案的域名，并完成CNAME绑定

得到CNAME

在购买域名的服务商处的管理控制台配置域名解析

5、在控制台查看视频

此时视频可以在阿里云控制台播放

6、获取web播放器代码

阿里云视频点播概念：

之前上传文件，保存的是上传文件之后的地址，但是在小节中保存视频的时候，而是保存的是视频的id，并不保存视频的地址，这是因为如果视频没有进行加密保存地址是可以的，但是如果视频加密，加密视频地址是不能播放的，在实际项目中，视频是需要加密的。

如果视频不进行加密，那别人得到地址那视频就可以播放，可以不付费就可以观看。

保存的是视频的id既可以得到视频播放的地址，也可以得到视频播放的凭证（既可以播放加密视频也可以播放不加密视频）。

02-使用服务端SDK

一、服务端SDK

1、简介

sdk的方式将api进行了进一步的封装，不用自己创建工具类。

我们可以基于服务端SDK编写代码来调用点播API，实现对点播产品和服务的快速操作。

2、功能介绍

SDK封装了对API的调用请求和响应，避免自行计算较为繁琐的 API签名。

支持所有点播服务的API，并提供了相应的示例代码。

支持7种开发语言，包括：Java、Python、PHP、.NET、Node.js、Go、C/C++。

通常在发布新的API后，我们会及时同步更新SDK，所以即便您没有找到对应API的示例代码，也可以参考旧的示例自行实现调用。

二、使用SDK

在service创建子模块service_ vod ，引入相关依赖到3 整合阿里云视频点播 01-视频点播微服务的创建笔记进行复制

1、安装

参考文档：https://help.aliyun.com/document_detail/57756.html

添加maven仓库的配置和依赖到pom

<repositories>

<repository>

<id>sonatype-nexus-staging</id>

<name>Sonatype Nexus Staging</name>

<url>https://oss.sonatype.org/service/local/staging/deploy/maven2/</url>

<releases>

<enabled>true</enabled>

</releases>

<snapshots>

<enabled>true</enabled>

</snapshots>

</repository>

</repositories>

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

2、初始化

public class InitObject {

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;

}

}

3、获取视频播放地址

public class VodSdkTest {

public static void main(String[] args) throws Exception {

//1 根据视频id获取视频播放地址

//获取初始化对象

DefaultAcsClient client = InitObject.initVodClient("LTAI4GKJXUR4VuFMrtnzzWBG","yiEPUWzpivYpYTG8o0tVW4UFqE2EQh");

//创建获取视频地址的request和response

GetPlayInfoResponse response = new GetPlayInfoResponse();

GetPlayInfoRequest request = new GetPlayInfoRequest();

//向request对象里面设置视频id

request.setVideoId("7d92de4882d44b24985862e5c368b195");

//调用初始化对象里面的方法，传递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");

}

}

https://help.aliyun.com/document_detail/61064.html?spm=a2c4g.11186623.6.910.65487bdcUJ2Djx

4、获取视频播放凭证

public class VodSdkTest {

public static void main(String[] args) throws Exception {

//根据视频id获取视频播放凭证

//初始化客户端、请求对象和相应对象

DefaultAcsClient client = InitObject.initVodClient("LTAI4GKJXUR4VuFMrtnzzWBG","yiEPUWzpivYpYTG8o0tVW4UFqE2EQh");

GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();

GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();

request.setVideoId("7d92de4882d44b24985862e5c368b195");

response = client.getAcsResponse(request);

System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");

}

}

03-文件上传测试

参考文档：https://help.aliyun.com/document_detail/53406.html

一、安装SDK

1、配置pom

2、安装非开源jar包

在本地Maven仓库中安装jar包：

下载视频上传SDK，解压，命令行进入lib目录，执行以下代码

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

把该文件下的生成的包复制到工作目录下：

然后在pom中引入jar包，版本号已经在整个项目的pom中指定

<dependency>

<groupId>com.aliyun</groupId>

<artifactId>aliyun-sdk-vod-upload</artifactId>

</dependency>

二、测试

1、创建测试文件

2、测试本地文件上传

public class VodSdkTest {

public static void main(String[] args) throws Exception {

//本地文件上传接口

String accessKeyId = "LTAI4GKJXUR4VuFMrtnzzWBG";

String accessKeySecret = "yiEPUWzpivYpYTG8o0tVW4UFqE2EQh";

String title = "6 - What If I Want to Move Faster-upload by sdk";//上传之后文件名称

String fileName = "E:/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");

}

}

3 整合阿里云视频点播

01-视频点播微服务的创建

一、创建视频点播微服务

1、创建微服务模块

Artifact：service-vod

2、引入依赖

3、application.properties

# 服务端口

server.port=8003

# 服务名

spring.application.name=service-vod

# 环境设置：dev、test、prod

spring.profiles.active=dev

#阿里云 vod

#不同的服务器，地址不同

aliyun.vod.file.keyid=LTAI4GKJXUR4VuFMrtnzzWBG

aliyun.vod.file.keysecret=yiEPUWzpivYpYTG8o0tVW4UFqE2EQh

4、启动类

VodApplication.java

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//在vod中，我们只是做视频的相关操作，并没有操作数据库

@ComponentScan(basePackages={"com.atguigu"})//包的扫描规则

public class VodApplication {

public static void main(String[] args) {

SpringApplication.run(VodApplication.class,args);

}

}

二、整合阿里云vod实现视频上传

1、创建常量类

ConstantPropertiesUtil.java

@Component

public class ConstantPropertiesUtil implements InitializingBean {

@Value("${aliyun.vod.file.keyid}")

private String keyId;

@Value("${aliyun.vod.file.keysecret}")

private String keySecret;

//定义公开静态常量

public static String ACCESS_KEY_ID;

public static String ACCESS_KEY_SECRET;

@Override

public void afterPropertiesSet() throws Exception {

ACCESS_KEY_ID = keyId;

ACCESS_KEY_SECRET = keySecret;

}

}

2、创建controller、service

VodController.java

@Api(description="阿里云视频点播微服务")

@RestController

@RequestMapping("/eduvod/video")

@CrossOrigin

public class VodController {

@Autowired

private VodService vodService;

//上传视频到阿里云

@PostMapping("uploadAlyiVideo")

public R uploadAlyiVideo(MultipartFile file){ //MultipartFile对象获取上传的文件

//上传视频返回视频的id

String videoId = vodService.uploadVideoAly(file);

return R.ok().data("videoId",videoId);

}

}

VodService.java

package com.atguigu.vod.service;

import org.springframework.web.multipart.MultipartFile;

public interface VodService {

String uploadVideoAly(MultipartFile file);

}

VodServiceImpl.java

@Service

public class VodServiceImpl implements VodService {

@Override

public String uploadVideoAly(MultipartFile file) {

try {

//如01.MP4

String fileName = file.getOriginalFilename();

//01

String title = fileName.substring(0,fileName.lastIndexOf("."));

InputStream inputStream = file.getInputStream();

UploadStreamRequest request = new UploadStreamRequest(ConstantPropertiesUtil.ACCESS_KEY_ID, ConstantPropertiesUtil.ACCESS_KEY_SECRET, title, fileName, inputStream);

UploadVideoImpl uploader = new UploadVideoImpl();

UploadStreamResponse response = uploader.uploadStream(request);

String videoId = response.getVideoId(); //请求视频点播服务的请求ID

if (response.isSuccess()) {

videoId = response.getVideoId();

} else { //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因

videoId = response.getVideoId();

}

return videoId;

} catch (IOException e) {

e.printStackTrace();

return null;

}

}

}

3、启动后端vod微服务

4、swagger测试

org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size exceeded; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.

解决办法：在配置文件中添加如下配置

# 最大上传单个文件大小：默认1M

spring.servlet.multipart.max-file-size=1024MB

# 最大置总上传的数据大小：默认10M

spring.servlet.multipart.max-request-size=1024MB

测试：

02-前端整合视频上传

一、配置nginx反向代理

将接口地址加入nginx配置：

location ~ /eduvod/ {

proxy_pass http://localhost:8003;

}

配置nginx上传文件大小，否则上传时会有 413 (Request Entity Too Large) 异常：

打开nginx主配置文件nginx.conf，找到http{}，添加：

client_max_body_size 1024m;

重启nginx：

nginx.exe -s stop

二、前端实现

1、数据定义

fileList: [],//上传文件列表

BASE_API: process.env.BASE_API // 接口API地址

2、整合上传组件

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

3、方法定义

//在上传接口中，上传成功后返回视频id(videoId)

//上传成功之后得到视频id，最终把视频id加到数据库中

handleVodUploadSuccess(response, file, fileList){

            //上传id名称赋值

            this.video.videoSourceId = response.data.videoId

        },

//上传之前：设置一个提示

handleUploadExceed(files, fileList){

            this.$message.warning('想要重新上传视频，请先删除已上传的视频')

},

测试：

将视频名称存储到数据库表：

定义：

videoOriginalName:'', //视频名称

//上传视频成功调用的方法，返回视频id因此需要response

        handleVodUploadSuccess(response, file, fileList){

            //上传id名称赋值

            this.video.videoSourceId = response.data.videoId

            //上传视频名称赋值

            this.video.videoOriginalName = file.name

        },

测试：

03-删除云端视频

文档：服务端SDK->Java SDK->媒资管理

https://help.aliyun.com/document_detail/61065.html?spm=a2c4g.11186623.6.831.654b3815cIxvma#h2--div-id-deletevideo-div-7

一、后端

VodController.java

//根据视频id删除阿里云视频

@DeleteMapping("removeAlyVideo/{id}")

public R removeAlyVideo(@PathVariable String id){

try {

//初始化对象

DefaultAcsClient client = InitObjectV.initVodClient(ConstantPropertiesUtil.ACCESS_KEY_ID,ConstantPropertiesUtil.ACCESS_KEY_SECRET);

//创建删除视频request对象

DeleteVideoRequest request = new DeleteVideoRequest();

//向request设置视频id

request.setVideoIds(id);

//调用初始化对象的方法实现删除

client.getAcsResponse(request);

return R.ok();

} catch (ClientException e) {

e.printStackTrace();

throw new GuliException(20001,"删除视频失败");

}

}

二、前端

1、定义api

api/edu/video.js

    //根据视频id删除阿里云视频

    deleteAliyunvod(id){

        return request({

            url:`/eduvod/video/removeAlyVideo/${id}`,

            method:'delete'

        })

    }

2、组件方法

views/edu/course/chapter.vue

    handleVodRemove(file, fileList){

            video.deleteAliyunvod(this.video.videoSourceId)

                 .then(response=>{

                      this.$message({

                        type: 'success',

                        message: "删除成功"

                    })

                 })

        },

        beforeVodRemove(file, fileList){

             return this.$confirm(`确定移除 ${file.name}？`)

        },

视频点击删除，但是数据库中还是把视频名称和id加入进来，这是因为在过程中先做了上传，上传之后视频名称和id赋值到video对象中了，我们做的删除只是删除了阿里云中的视频，但是video中的数据还存在。

解决：

  handleVodRemove(file, fileList){

            video.deleteAliyunvod(this.video.videoSourceId)

                 .then(response=>{

                      this.$message({

                        type: 'success',

                        message: "删除成功"

                    })

                    //把文件列表清空

                    this.fileList = []

                    //把video视频id和视频名称值清空

                    //上传视频id赋值

                    this.video.videoSourceId = ''

                    //上传视频名称赋值

                    this.video.videoOriginalName = ''

                 })

        },