vue中使用阿里云视频点播播放器

目录

使用阿里云视频点播播放器

参考文档：

组件代码：

---

使用阿里云视频点播播放器

        使用阿里云视频点播播放器时遇到一些问题，比如获取不到播放器实例，建议将播放器封装为组件，其中只有阿里云播放器一个实例，视频videoId从父组件获取传给播放器组件，再使用后端接口获取视频播放凭证playAuth，如果想使用source播放，直接在创建实例的时候添加source属性。本文只贴了组件代码，请根据自己需求编写父组件代码样式文件等。

参考文档：

阿里云视频点播播放器接口文档以及播放器demo

接口说明 (aliyun.com)https://help.aliyun.com/zh/vod/developer-reference/api-operations?spm=a2c4g.11186623.0.0.22231db3I2PRfk

组件代码：

本组件只使用到了部分文档中的方法比如：销毁播放器 dispose()、获取当前的播放时刻getCurrentTime()、获取视频总时长 getDuration()，如果要使用播放器的其他方法，请参考官方文档 ↑ 
*点击切换章节或者想要切换视频的时候，监听父组件传值变化，从而重新创建阿里云实例实现播放不同视频

<template>
  <div>
    <div ref="player" id="player-con"></div>
  </div>
</template>

<script>
// 根据自己的请求js进行引入
import {
  getPlayParam,
  getStuPlayParam,
  getAuth,
  getURL,
  vodCount,
  records,
} from "@/utils/api2/course-detail.js";
export default {
  data() {
    return {
      PlayAuth: "",
      player: "",
    };
  },
  watch: {
    // 监听视频Id的变化
    async videoId(newVal, oldVal) {
      await this.getPlayAuth; //重新获取playAuth
      this.init(); // 监听变化初始化
    },
  },
  mounted() {
    this.init();
  },
  // 父组件传参
  props: {
    shikeId: {
      type: String,
      default: "",
    },
    videoId: {
      type: String,
      default: "",
    },
    mode: {
      type: Number,
      default: 0,
    },
    playSchedule: {
      type: Number,
      default: 0,
    },
    isHistory: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //从后端获取playAuth(视频播放凭证，根据videoId)
    async getPlayAuth() {
      let res = await getAuth(this.videoId);
      this.PlayAuth = res.data.data.PlayAuth;
    },
    //初始化aliplayer
    async init() {
      var This = this;
      if (This.player) {
        // 如果已经创建了，就销毁
        This.player.dispose();
      }
      let res = await getAuth(This.videoId);
      This.PlayAuth = res.data.data.PlayAuth;
      // 创建实例
      var player = new Aliplayer(
        {
          id: "player-con",
          vid: This.videoId, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: This.PlayAuth, //必选参数。音视频播放凭证。
          width: "100%",
          height: "500px",
          //   cover:
          //     "https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg", // 封面图片
          /* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
          autoplay: false,
          preload: false,
          isLive: false,
        },
        function (player) {
          // 可以在这里对player实例进行操作
          console.log("The player is created");
          console.log(player.getCurrentTime());
          console.log(player.getDuration());
        }
      );
      This.player = player;
    },
  },
};
</script>

<style></style>

完成图