开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：整合阿里云播放器播放（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11482
整合阿里云播放器播放（1）
内容介绍：
一、创建接口，根据视频id获取视频播放凭证
二、点击某个小节，打开一个新的页面实现播放
三、后端获取播放凭证
四、前端播放器整合
一、创建接口，根据视频 id 获取视频播放凭证
代码示例：
public R getPlayAuth(@PathVariable String id){
try {
//创建初始化对象
DefaultAcsClient client =InitVodCilent.initVodClient
(ConstantVodUtils.ACCESS_KEY_ID,ConstantVodUtils..
//创建获取凭证 request 和 response 对象
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest() ;
//向 request 设置视频 id
request.setVideold(id):
//调用方法得到凭证
GetVideoPlayAuthResponse response = client.getAcsResponse(request);
String playAuth = response.getPlayAuth( );
return R. ok() .data("playAuth",playAuth) ;
}
catch(Exception e) {
throw new GuliException(20001,"获取凭证失败");
}
}
二、点击某个小节，打开一个新的页面实现播放
1.修改超链接地址
<a :href=""/player"+video.videoSourceId" >
2. 在 pages 创建文件夹和文件,使用动态路由方式
3.细节：
public class Videovo {
private String id;
private String title;//添加属性
private String videoSourceId;//视频 id
三、后端获取播放凭证
1.VideoController
service-vod 微服务中创建 VideoController.java
controller 中创建 getVideoPlayAuth 接口方法心
package com.guli. vod .controller;
@Api(description-"阿里云视频点播微服务")
@Cross0rigin //跨域
@RestController
@RequestMlapping(" / vod/video")7
public class videoController {
GetMlapping("get-play-auth/ivideold}"")
public R getVideoPlayluth(@PathVariable("videold" ) String videoId)
threws Exception {
//获取阿里云存储相关常量
String accessKeyId = ConstantPropertiesutil. ACCESs_KEY_ID;
String accessKeySecret - ConstantPropertiesutil.ACCESS_KEY_SECRET;
//初始化
Def aultAcsClient client = AliyunvodSDKUtils.initVodClient
(accessKeyId，accessKeySecret);
//请求
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
request.setVideoId(videoId);
//响应
GetvideoPlayAuthResponse response = client.getAcsResponse(request);
l//得到播放凭证
String playAuth - response.getPlayAuth();
//返回结果
return R.ok ( ) .message("获取凭证成功").data("playAuth"，playuth);
}
}
四、前端播放器整合
1、点击播放超链接
Course/_id.vue
修改课时目录超链接
<a
: href="" /player / "+video.videoSourceId”
:title="video.title"
tanget="_blank">
2、layout
因为播放器的布局和其他页面的基本布局不一致，因此创建新的布局容器 layoutsvideo.vue
ctemplate>
<div class="guli-player">
<div class="head"">
<a href="#” title="谷粒学院">
<img class="logo" src="~/assets/img/logo.png”lt=谷粒学院”>
<la><ldiv>
<div class="body">
<div classm" content"><nuxt/></div>
</div>
</div>
< /template>
<script>
export default {}
</script>
<style>
html, body{
height : 100K;
}
3.创建播放器
/**
*页面渲染完成时:此时 js 脚本已加载，Aliplayer 已定义，可以使用
*如果在 created 生命周期函数中使用，Aliplayer is not defined 错误
*/
mounted() {
new Aliplayer({
id: "]_prismPlayer" ,
vid: this.vid，//视频 id
playauth: this.playAuth，//播放凭证
encryptType: '1'，//如果播放加密视频，则需设置 encryptType=1，非加密视频无需设置此项
width: "1000" ,
height: "50apx"
}, function(player) {
console.log( 播放器创建成功"
))
}
4. 其他常见的可选配置
//以下可选设置
cover: "http:/ /guli.shop/photo/banner/1525939573202.jpE'，//封面
qualitySort: "asc",//清晰度排序
mediaType: "video', //返回音频还是视频
autoplay: false,//自动播放
isLive: false,//直播
rePlay: false,//循环播放
preload: true,
controlBarvisibility: "hover",//控制条的显示方式:鼠标悬停
useHSPrism: true,i//播放器类型:html5
