谷粒学院16万字笔记+1600张配图(十一)——课程管理

项目源码与所需资料
链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59
提取码：8z59

demo11-课程管理

1.阿里云视频点播

1.1开通阿里云视频点播服务

1.进入阿里云官网https://www.aliyun.com

2.登录账号后在搜索栏搜索"视频点播",点击"视频点播"

3.点击"管理控制台"

4.点击"开通服务"

5.选择"流量计费"后点击"开通服务"(流量计费的好处是不使用时不花钱)

1.2"音/视频"菜单

在阿里云视频点播的控制台的"媒资库"的"音/视频"菜单下可以上传视频并管理我们上传的视频

接下来我们测试上传视频

1.建议别用太大的视频,资料中有一个2MB左右的视频,可以用这个视频来测试

2.先开通存储:在配置管理–>媒资管理配置–>存储管理中点击"启用"

3.点击"上传音/视频"

4.点击"添加音/视频"

5.添加将要上传的视频后点击"开始上传"

6.可以看到我们成功上传了

7.点击"管理"

8.红框圈起来的就是刚刚上传的视频的地址

9.将视频地址复制到浏览器中,就可以播放视频了

1.3"转码模板组"菜单

1.在阿里云视频点播的控制台的配置管理–>媒体处理配置–>转码模板组中可以管理我们的转码模板。可以看到默认是系统内置的不转码

2.点击"添加转码模板组"

3.点击普通转码模板下的"+添加模板"

4.填写信息时只需要干这三件事(其余配置不用管,使用默认的就可以)然后点击"保存"即可:

• 给模板组随便起个名字
• 将"基本参数"的封装格式改为"hls"
• 将"高级参数"的"视频加密"打开,并选择加密方式为"私有加密"即HLS加密

其中第二件事和第三件事的目的是:这样做后即使别人拿到了视频地址也不能在浏览器播放,只有我们自己知道怎么播放

5.执行’1.2"音/视频"菜单’的第3、4步

6.成功添加将要上传的视频后,选中我们刚刚创建的转码模板组然后点击"开始上传"

7.上传成功后点击"管理"

8.将加密后的视频地址复制下来

9.将复制的视频地址粘贴到浏览器中,可以看到此时不能播放该视频

10.如果想要播放加密视频是需要域名的,我们后面上传视频都上传不加密的,所以这里的域名不多说了

2.后端集成阿里云视频点播

2.1创建模块

1.在service上右键,选择New–>Module…

2.我们这里是创建一个maven工程

3.填写信息

2.2添加依赖

1.在service_vod中添加下面这些依赖(依赖爆红的去看"demo03-后台讲师管理模块"的"2.2.2创建父工程"的第8步,我在第8步的最后面说了解决办法)

<dependencies>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-java-sdk-coreartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyun.ossgroupId>
        <artifactId>aliyun-sdk-ossartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-java-sdk-vodartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-sdk-vod-uploadartifactId>
    dependency>
    <dependency>
        <groupId>com.alibabagroupId>
        <artifactId>fastjsonartifactId>
    dependency>
    <dependency>
        <groupId>org.jsongroupId>
        <artifactId>jsonartifactId>
    dependency>
    <dependency>
        <groupId>com.google.code.gsongroupId>
        <artifactId>gsonartifactId>
    dependency>

    <dependency>
        <groupId>joda-timegroupId>
        <artifactId>joda-timeartifactId>
    dependency>
dependencies>

2.刷新maven

2.3创建配置文件

在resources目录下创建配置文件application.properties并编写配置

# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod

# 环境设置：dev、test、prod
spring.profiles.active=dev

#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=LTAI5tMUCkxmE6ouUc2dmbXm
aliyun.vod.file.keysecret=0Py10jHOPVkeFp6MiIm88c9QqyykUE

# 最大上传单个文件大小：默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 ：默认10M
spring.servlet.multipart.max-request-size=1024MB

• 截图中的第11行和第12行分别是AccessKey ID和 AccessKey Secret,这两个参数填自己的(在"demo06-上传讲师头像"的"1.5创建操作阿里云oss的许可证")
• 截图中第15行作用:我们使用tomcat上传时默认的最大大小是1M,我们手动修改最大大小为1024M

2.4创建启动类

创建包com.atguigu.vod,然后在该包下创建主启动类VodApplication,并在类中编写代码

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages = {"com.atguigu"})
public class VodApplication {
    public static void main(String[] args) {
        SpringApplication.run(VodApplication.class, args);
    }
}

截图中第8行代码的作用,忘了的可以去看"demo06-上传讲师头像"的"2.5启动项目"

3.测试

3.1获取视频地址

3.1.1数据库中存的是视频id

1.我们曾经将讲师头像和课程封面上传到阿里云oss后在数据库中存的是上传后的图片地址,但是小节表edu_video的video_source_id子段存的是上传后的视频id而不是视频地址。

为什么这个字段存视频id而不存视频地址:我们在’1.3"转码模板组"菜单’的第9步说过,即使我们得到了加密视频的地址仍不能在浏览器中播放视频,如果我们上传的视频都是没有加密的,那么数据库中存视频地址是可以的,但实际开发中视频肯定会加密,那么数据库中存视频地址将毫无意义,所以我们要让这个字段存视频id

2.每个视频都有一个唯一的id

3.1.2代码写到test目录下

因为我们现在只是编写测试代码,所以将代码写到test目录下,后期我们整合的时候会在java目录中写代码。在test包的java包中创建包com.atguigu.vodtest

3.1.3初始化

初始化操作:创建DefaultAcsClient实例对象,我们后面的功能都是通过调用这个实例对象的方法来实现

在vodtest包下创建类InitObject并编写代码

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

点播服务接入区域固定是"cn-shanghai",因为目前这个服务都是部署在上海

3.1.4根据视频id获取视频播放地址

1.在vodtest包下创建类TestVod并编写代码

public class TestVod {
    //根据视频id获取视频播放地址
    @Test
    public void getPlayUrl() throws Exception {
        //1.创建初始化对象
        DefaultAcsClient client =InitObject.initVodClient(
                                        "LTAI5tMUCkxmE6ouUc2dmbXm",
                                        "0Py10jHOPVkeFp6MiIm88c9QqyykUE");

        //2.创建获取视频地址的request和response
        GetPlayInfoRequest request = new GetPlayInfoRequest();
        GetPlayInfoResponse response = new GetPlayInfoResponse();

        //3.向request对象里面设置视频id(必须是没有加密的视频id)
        request.setVideoId("7218f0acdf4f4a76950d509fb1d18f51");

        //4.调用初始化对象里面的方法,获取视频信息
        response = client.getAcsResponse(request);

        //5.从获取到的视频信息中取两个信息:播放地址和视频名称
        List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
        //播放地址
        for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
            System.out.println("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
        }
        //Base信息
        System.out.println("VideoBase.Title = " + response.getVideoBase().getTitle()+"\n");
    }
}

• 截图中第15行的initVodClient方法的两个参数分别是AccessKey ID和 AccessKey Secret,这两个参数填自己的(在"demo06-上传讲师头像"的"1.5创建操作阿里云oss的许可证")
• 截图中第24行:我们在’1.3"转码模板组"菜单’的第9步说过了,即使我们获取到了加密视频的地址也无法播放视频,所以这里的id我们要使用没有加密的视频的id

2.在getPlayUrl方法上右键选择"Run ‘getPlayUrl()’"

3.测试结果如下

3.2获取视频凭证

1.在类TestVod中编写根据视频id获取视频凭证的方法

//根据视频id获取视频凭证
@Test
public void getPlayAuth() throws Exception {
    //1.创建初始化对象
    DefaultAcsClient client =InitObject.initVodClient(
        "LTAI5tMUCkxmE6ouUc2dmbXm",
        "0Py10jHOPVkeFp6MiIm88c9QqyykUE");

    //2.创建获取视频凭证的request和response
    GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
    GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();

    //3.向request对象里面设置视频id(加密视频id、没有加密视频的id都是可以的)
    request.setVideoId("0467c17af0ab4040bc1a739f5a29a970");

    //4.调用初始化对象里面的方法,获取视频信息
    response = client.getAcsResponse(request);

    //5.从获取到的视频信息中取视频凭证的信息
    System.out.println("playauth: " + response.getPlayAuth());
}

2.在getPlayAuth方法上右键选择"Run ‘getPlayAuth()’"

3.测试结果如下

3.3本地文件上传

1.资料给的VODUploadDemo-java-1.4.11–>sample–>UploadVideoDemo.java中人家已经给了文件上传的几种方式及对应示例代码

2.我们这里使用本地文件上传的示例代码,并根据实际情况进行修改:

在类TestVod中编写本地文件上传的方法:

//本地视频上传
@Test
public void uploadVideo() {
    String accessKeyId = "LTAI5tMUCkxmE6ouUc2dmbXm";
    String accessKeySecret = "0Py10jHOPVkeFp6MiIm88c9QqyykUE";
    String title = "6 - What If I Want to Move Faster -- upload by sdk"; //上传后文件的名称
    String fileName = "C:/Users/mxy/Desktop/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.在uploadVideo方法上右键选择"Run ‘uploadVideo()’"

4.控制台中输出了上传后的视频的id

5.去阿里云视频点播的控制台中可以看到我们确实成功上传了

4.添加小节视频后端

4.1基本结构

1.在vod包下创建包controller,然后在controller包下创建控制器VodController

@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {
}

记得给控制器VodController加CrossOrigin注解,我这里忘加了,后来补上了,但我不想重新截图了

2.在vod包下创建包service,然后在service包下创建业务层接口VodService

3.在service包下创建包impl,然后在impl包下创建业务层接口的实现类VodServiceImpl,并使该类实现VodService接口

@Service
public class VodServiceImpl implements VodService {
}

4.2控制层

在控制器VodController中编写代码

@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {

    @Autowired
    private VodService vodService;

    //上传视频到阿里云
    @PostMapping("uploadAlyVideo")
    public R uploadAlyVideo(MultipartFile file) {
        //返回上传视频的id
        String videoId = vodService.uploadAlyVideo(file);
        return R.ok().data("videoId", videoId);
    }
}

记得给控制器VodController加CrossOrigin注解,我这里忘加了,后来补上了,但我不想重新截图了

4.3业务层接口

在业务层接口VodService中定义抽象方法

public interface VodService {
    //上传视频到阿里云
    String uploadAlyVideo(MultipartFile file);
}

4.4创建常量类

中间的细节不多说了,直接去"demo06-上传讲师头像"的"3.创建常量类"回顾即可,。

在vod包下创建包utils,然后在utils包下创建常量类ConstantVodUtils并使其实现InitializingBean,最后在ConstantVodUtils类中编写代码(注意:这里的@Value注解导的是Spring里面的,别导错包了)

@Component
public class ConstantVodUtils implements InitializingBean {
    //读取配置文件内容
    @Value("${aliyun.vod.file.keyid}")
    private String keyId;
    @Value("${aliyun.vod.file.keysecret}")
    private String keySecret;

    //定义public的静态常量
    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;
    }
}

4.5业务层实现类

在业务层实现类VodServiceImpl中实现"4.3业务层接口"中定义的抽象方法编写业务逻辑,我们在"3.3本地文件上传"的第1步说过了,人家给的有示例代码,这次我们使用"流式上传接口"的示例代码并根据实际情况进行修改

@Service
public class VodServiceImpl implements VodService {
    //上传视频到阿里云
    @Override
    public String uploadAlyVideo(MultipartFile file) {
        try {
            //上传的文件的原始名称(如:01.mp4)
            String fileName = 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 { //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因
                videoId = response.getVideoId();
            }

            return videoId;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }

    }
}

4.6测试

启动服务后在地址栏输入http://localhost:8003/swagger-ui.html自行测试,我测试没问题

5.添加小节视频前端

5.1添加上传组件

1.将chapter.vue页面中红框圈起来的部分删掉

2.将下述代码复制到刚刚删除的位置

    
    上传视频
    
        
最大支持1G，

            支持3GP、ASF、AVI、DAT、DV、FLV、F4V、

            GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、

            MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、

            SWF、TS、VOB、WMV、WEBM 等视频格式上传
        
    
    

fileList: [], //上传文件的列表
BASE_API: process.env.BASE_API //接口API地址

//上传视频成功调用的方法
handleVodUploadSuccess(response) {
    //上传视频id赋值
    this.video.videoSourceId = response.data.videoId
},
//上传之前调用的方法(多用于设置文件大小、类型)
handleUploadExceed() {
    this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},

location ~ /eduvod/ {
	proxy_pass http://localhost:8003;
}

client_max_body_size 1024m;

//上传视频名称赋值
this.video.videoOriginalName = file.name

public class InitVodClient {
    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;
    }
}

//根据视频id删除阿里云中的视频
@DeleteMapping("removeAlyVideo/{id}")
public R removeAlyVideo(@PathVariable String id) {
    try {
        //1.创建初始化对象
        DefaultAcsClient client = InitVodClient.initVodClient(
            ConstantVodUtils.ACCESS_KEY_ID,
            ConstantVodUtils.ACCESS_KEY_SECRET);

        //2.创建删除的request
        DeleteVideoRequest request = new DeleteVideoRequest();

        //3.向request对象里面设置视频id
        request.setVideoIds(id);

        //4.调用初始化对象里面的方法,实现删除
        client.getAcsResponse(request);

        return R.ok();
    } catch(Exception e) {
        e.printStackTrace();
        throw new GuliException(20001, "删除视频失败");
    }
}

//5.根据视频id删除阿里云中的视频
deleteAlyVod(id) {
  return request({
    url: `/eduvod/video/removeAlyVideo/${id}`,
    method: 'delete'
  })
}

//点击×调用的方法,我们让其跳出弹框
beforeVodRemove(file) {
    return this.$confirm(`确定移除 ${ file.name }？`);
},

//点击×后跳出弹框,点击弹框的"确定"后调用的方法
handleVodRemove() {
    video.deleteAlyVod(this.video.videoSourceId)
        .then(response => {
            //提示删除成功
                this.$message({
                    type: 'success',
                    message: '删除视频成功!'
                });
            //把文件列表清空
            this.fileList = []
        })
},

//把video对象中的视频id和视频名称值清空
this.video.videoSourceId = ''
this.video.videoOriginalName = ''