在线教育项目整合阿里云播放器

1、在小节vo类添加视频id属性（注意：字段名必须和EduVideo字段一样）

@Data
public class VideoVo {

    private String id;
    private String title;
    //视频id
    private String videoSourceId;
}

2、点击小节打开视频播放页面

（1）视频播放入口位置

（2）改造pages/course/_id.vue页面的视频播放入口

<a
   :href="'/player/'+video.videoSourceId"
   :title="video.title"
   target="_blank">

(3)新建player/_vid.vue文件

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

<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

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文件。

<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获取播放凭证。

<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("播放器创建成功"); } ); }