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

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("播放器创建成功"); } ); }
相关推荐
也无晴也无风雨39 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
憨子周40 分钟前
2M的带宽怎么怎么设置tcp滑动窗口以及连接池
java·网络·网络协议·tcp/ip
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
霖雨2 小时前
使用Visual Studio Code 快速新建Net项目
java·ide·windows·vscode·编辑器
SRY122404192 小时前
javaSE面试题
java·开发语言·面试
Fiercezm3 小时前
JUC学习
java
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
无尽的大道3 小时前
Java 泛型详解:参数化类型的强大之处
java·开发语言
ZIM学编程3 小时前
Java基础Day-Sixteen
java·开发语言·windows
我不是星海3 小时前
1.集合体系补充(1)
java·数据结构