1、在小节vo类添加视频id属性(注意:字段名必须和EduVideo字段一样)
html
@Data
public class VideoVo {
private String id;
private String title;
//视频id
private String videoSourceId;
}
2、点击小节打开视频播放页面
(1)视频播放入口位置
(2)改造pages/course/_id.vue页面的视频播放入口
html
<a
:href="'/player/'+video.videoSourceId"
:title="video.title"
target="_blank">
(3)新建player/_vid.vue文件
html
<template>
<div>
<!-- 阿里云视频播放器样式 -->
<link
rel="stylesheet"
href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css"
>
<!-- 阿里云视频播放器脚本 -->
<script
charset="utf-8"
type="text/javascript"
src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"
/>
<!-- 定义播放器dom -->
<div id="J_prismPlayer" class="prism-player"/>
</div>
</template>
<script>
import vod from '@/api/vod'
export default {
layout: 'video', // 布局
// 异步请求操作
asyncData({ params, error }) {
return vod.getPlayAuth(params.vid).then(response => {
return {
vid: params.vid,
playAuth: response.data.data.playAuth
}
})
},
/**
* 页面渲染完成时:此时js脚本已加载,Aliplayer已定义,可以使用
* 如果在created生命周期函数中使用,Aliplayer is not defined错误
*/
mounted() {
// eslint-disable-next-line no-undef
new Aliplayer(
{
id: 'J_prismPlayer',
autoplay: false,
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
vid: this.vid, // 视频id
playauth: this.playAuth, // 播放凭证
encryptType: '1', // 如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项
width: '100%',
height: '500px'
},
function(player) {
console.log('播放器创建成功')
}
)
}
}
</script>
3、创建layout
播放器页面布局和基本页面布局不一样,所以需要创建新的布局layouts/video.vue。
html
<template>
<div class="guli-player">
<div class="head">
<a href="#" title="谷粒学院">
<img class="logo" src="~/assets/img/logo.png" lt="谷粒学院">
</a></div>
<div class="body">
<div class="content"><nuxt/></div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
html,body{
height:100%;
}
</style>
<style scoped>
.head {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.head .logo{
height: 50px;
margin-left: 10px;
}
.body {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
4、 api文件夹下创建新的接口文件,获取播放凭证,vod.js
html
import request from '@/utils/request'
export default {
//根据视频id获取视频播放凭证
getPlayAuth(vid) {
return request({
url: `/eduvod/video/getPlayAuth/${vid}`,
method: 'get'
})
}
}
5、 实现播放器页面pages/player/_vid.vue
(1)引入播放器css,js文件。
html
<template>
<div>
<!-- 阿里云视频播放器样式 -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
<!-- 阿里云视频播放器脚本 -->
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />
<!-- 定义播放器dom -->
<div id="J_prismPlayer" class="prism-player" />
</div>
</template>
(2)通过js获取播放凭证。
html
<script>
import vod from "@/api/vod"
export default {
layout:'video',//布局
//异步请求操作
asyncData({params,error}){
return vod.getPlayAuth(params.vid)
.then(response=>{
return {
vid:params.vid,
playAuth:response.data.data.playAuth
}
})
}
}
</script>
(3)创建播放器 /**
- 页面渲染完成时:此时js脚本已加载,Aliplayer已定义,可以使用
- 如果在created生命周期函数中使用,Aliplayer is not defined错误 */ mounted() { new Aliplayer( { id: "J_prismPlayer", autoplay: false, cover: "liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png", vid: this.vid, // 视频id playauth: this.playAuth, // 播放凭证 encryptType: "1", // 如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项 width: "100%", height: "500px" }, function(player) { console.log("播放器创建成功"); } ); }