阿里播放器Aliplayer遇到的所有坑

1，关于阿里播放器使用过的几种播放方式

url （source）

① 要在创建播放器前要拿到资源否则会报错

② 在有不同清晰度的资源时  直接调用 player.loadByUrl() 方法会报错 官网给出的例子：JSON.stringify({ 'FD': videoUrl.Fd, 'SD': videoUrl.Sd })   （首次可以播，但在切换时资源路径会出错，官网的demo只有单个视频，无法测试切换）

解决方法是 直接抛弃 player.loadByUrl()  ，每次销毁播放器，然后重新创建。

vid+playauth：

这种方式清晰度不需要自己设置，但坑比较多。在F5刷新后视频组件会丢失，只剩下封面，并且此类型必须额外写入一些配置，指定清晰度等等。

这种方式切换视频源不用player.loadByUrl() ，要用  player.replayByVidAndPlayAuth(this.vid, this.playauth)  方法

        // vid+playauth播放

        // vid: this.vid,

        // playauth: this.playauth,

        // encryptType: '1', // 播放加密视频

        // qualitySort: "asc", // 指定排序方式，只有使用Vid + PlayAuth播放方式时支持。

        // format: "m3u8", // 指定播放地址格式，只有使用vid的播放方式时支持可选值。

        // definition: "FD,LD,SD,HD,OD,2K,4K", // 此值是vid对应流清晰度的一个子集，仅H5模式支持。

        // defaultDefinition: 'SD', // 默认视频清晰度，此值是vid对应流的一个清晰度，仅H5模式支持。

2，需注意这几种事件的坑，在记录上报，播放时常要在 播放中playing 而不是 播放play 中执行，播放完毕后顺序播放可以用自带组件，这里是自己实现，但是有个bug是 ended播放完毕回调中 事件会执行两次！这里是设置了个开关来限制的。

3，配置中有个 skinLayout 可以设置一些播放组件，其中 setting 里自带倍速，字幕，音轨，清晰度，但是字幕和音轨这里用不到，还没法去掉。但是注释了setting又会导致 倍速和清晰度不见了。

这里官方提供了 components组件

components: [

          { name: 'RateComponent', type: AliPlayerComponent.RateComponent },

          { name: 'MemoryPlayComponent', type: AliPlayerComponent.MemoryPlayComponent },

          {

            name: 'QualityComponent',

            type: AliPlayerComponent.QualityComponent

          }],

 

RateComponent 为倍速

MemoryPlayComponent 历史记录

QualityComponent 是清晰度 ，这里有个坑，就是原本项目中引入的是   https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js   （2.8.1版本的js和css）导致 一引入 清晰度组件就会报错，一只到不到原因，后来修改为 2.9.23版本的，报错消失。

 

4，倍速功能，因为有之前的坑，每次会销毁播放器重新创建，所以导致播放下一个视频时倍速会重置成1，官网还没有提供切换倍速抛出的事件，所以就捕获不到倍速的改变，也就无法在下一个时去设置倍速。只能手写一个倍速盒子点击时去对接阿里的方法。

 

音乐播放器的代码：

<template>
    <!-- 容器 -->
    <div class="container">
      <!-- 音频播放器 -->
      <transition name="el-zoom-in-top">
        <div v-show="isShowPlayer" class="audioWrapper">
          <div class="header">
            <div class="title">正在播放 {{playingAudioName}}</div>
            <img class="close" src="@/assets/image/close.png" alt="关闭播放器" @click="closePlayer">
          </div>
          <div class="audio-box" v-loading="playerLoading">
            <img :src="play?pauseIcon:playIcon" alt="播放暂停" @click="playHandle()">
            <div class="audio-progress">
              <el-slider v-model="sliderVal" :format-tooltip="formatTooltip" :min="sliderMin" :max="sliderMax" @change="sliderChange"></el-slider>
              <div id="aliPlayer"></div>
              <div class="audio-info">
                <div>
                  <span class="current-time">{{currentTime}}</span>
                  <span class="time-middle">/</span>
                  <em class="time-long">{{duration}}</em>
                </div>
                <div class="util-box">
                  <span @click="isShowRateList = !isShowRateList">倍速{{rateVal}}x</span>
                  <ul v-if="isShowRateList">
                    <li v-for="(t,i) in playBackRateList" :key="i" @click="changeRate(t)">{{t}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
import { courseStore } from "@/store/course.js";
import { tokenStore } from "@/store/user.js";
export default {
  layout: 'detail',
  name: 'CourseCatalogue',

  // 校验动态路由参数的有效性
  validate({ params, query }) {

  },
// 获取详情数据
  async asyncData({ $axios, params }) {
return {

    }
  },

  // 处理数据
  created() {

  },

  mounted() {
    // 初始化播放器
    this.createPlayer()

  },

  // 销毁定时器及阿里播放器
  beforeDestroy() {
    this.stopReportLearning()
    if (this.player) {
      this.player.dispose()
      this.player = null
    }
  },

  //
  computed: {

  },
  data() {
    return {
      store: courseStore(), // 课程商店
      userStore: tokenStore(), // 用户商店

      seeked: true, // 是否可续播
     // 播放相关
      canplay: false,// 是否可以播放
      isShowPlayer: false,// 是否显示播放器
      playerLoading: true, // 播放器loading
      playingAudioName: '', // 正在播放的课程名称
      player: null, // 播放器
      timer: null,  // 学习上报定时器
      playDate: '', // 当前视频的时间戳
      opener: true,
      playerUrl: '/a.m3u8', // 播放的资源路径
      sliderVal: 0, // 滑块当前时长。
      sliderMin: 0,
      sliderMax: 0, // 滑块的总时长。
      currentTime: '00:00', // 当前播放时间
      duration: '00:00', // 总时长
      play: false, // 播放ing?暂停?
      // 播放/暂停图标
      playIcon: require('@/assets/image/play.png'),
      pauseIcon: require('@/assets/image/pause.png'),
      isShowRateList: false, // 是否展示倍速列表
      rateVal: 1, // 当前倍速
      playBackRateList: [0.25, 0.5, 0.75, '正常', 1.25, 1.5, 1.75, 2], // 倍速
    }
  },
  methods: {
    // 获取vid+playauth
    getVid() {

    },// 初始化播放器
    createPlayer() {
      let prop = {
        id: "aliPlayer",
        source: this.playerUrl,
        mediaType: "audio",
        width: "100%",
        height: "100%",
        autoplay: false, // 自动播放
        isLive: false, // 直播
        rePlay: false, // 循环播放
        playsinline: true, //H5是否内置播放
        preload: true, //播放器自动加载
        language: "zh-cn", // 语言
        cover: '', //播放器默认封面图片,需要autoplay为’false’时，才生效
        controlBarVisibility: "hover", //控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在
        useH5Prism: true //指定使用H5播放器
      }

      this.player = new Aliplayer(prop, function (player) {
        console.log("The player is created");
      })

      // 播放 (由暂停恢复为播放时触发)
      this.player.on('play', () => {
        this.play = true
      })

      // 暂停
      this.player.on('pause', () => {
        this.play = false
        this.stopReportLearning()
      })

      // 播放ing (播放中，会触发多次)
      this.player.on('playing', () => {
        // console.log('播放中ing')

        // 学习记录上报
        this.learningReport()
      })

      // 可以播放
      this.player.on('canplay', () => {
        this.playerLoading = false
        const courseInfo = this.store.getCourseInfo
        if (this.canplay && this.seeked && courseInfo.duration && courseInfo.newestLessonId === courseInfo.lessonId) {
          this.seeked = false
          this.player.seek(courseInfo.duration)
        }
      })

      // 等待缓冲
      this.player.on('waiting', () => {
        this.playerLoading = true
      })

      // 时长发生变动时
      this.player.on('timeupdate', () => {
        this.updateTime()
      })

      // 播放出错
      this.player.on('error', () => {
        this.$message.error('播放出错')
        this.stopReportLearning()
        this.sliderVal = 0
        this.play = false
        this.playerLoading = true
        this.isShowPlayer = false
        this.store.setIsPlaying(false)
      })

      // 播放完毕
      this.player.on("ended", () => {
        if (this.opener) {
          this.opener = false
          console.log('播放完了！')

          // 停止学习上报
          this.stopReportLearning()
          this.playDate = ''

          // 调用子组件方法，自动播放下一个
          const courseInfo = this.store.getCourseInfo
          this.$refs.CourseCurriculum.createdPlayList(courseInfo.courseId, courseInfo.lessonId)
        }
      });
    },

    // 学习记录上报
    learningReport() {

      // 先清空
      this.stopReportLearning()

      const courseInfo = this.store.getCourseInfo
      const lessonAudioVideo = courseInfo.lessonAudioVideo

      // 播放时长小于1时不进行上报
      // if (curTime <= 1) {
      //   return
      // }

      if (this.playDate === '') {
        const nowDate = new Date
        this.playDate = nowDate.getTime()
      }

      // 学次唯一值
      const userInfo = this.userStore.getUserInfo
      const key = `${userInfo.userId}_${courseInfo.orderId}_${courseInfo.projectId}_${courseInfo.courseId}_${courseInfo.lessonId}_${this.playDate}`;
      const sessionKey = this.$md5(key)

      this.timer = setInterval(() => {
        const curTime = parseInt(this.player.getCurrentTime())
        this.$axios.$post('/hadoop/learning/learningRecordSend', {
          sessionKey: sessionKey,
          orderId: courseInfo.orderId,
          projectId: courseInfo.projectId,
          courseId: courseInfo.courseId,
          courseCatalogId: courseInfo.lessonId,
          resourceType: lessonAudioVideo.type,
          resourceId: lessonAudioVideo.audioId,
          duration: curTime
        }).then(() => { }).catch((err) => {
          if (err.code === 10009) this.player.pause()
        });
      }, 5000)
    },

    // 停止上报学习记录
    stopReportLearning() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    // 关闭播放器
    closePlayer() {
      this.isShowPlayer = false
      this.store.setIsPlaying(false)
      this.stopReportLearning()
      this.play = false
      this.playerLoading = true
      this.player.pause()
    },

    // 播放/暂停
    playHandle() {
      this.play = !this.play
      this.play ? this.player.play() : this.player.pause()
    },

    // 更新时间
    updateTime() {
      if (!Number.isFinite(this.player.getDuration())) {
        this.currentTime = Number.MAX_SAFE_INTEGER;
        this.currentTime = '00:00';
      } else {
        const total = this.formatTime(this.player.getDuration())
        const current = this.formatTime(this.player.getCurrentTime())
        this.duration = `${total.min}:${total.sec}`
        this.currentTime = `${current.min}:${current.sec}`
        this.sliderVal = Math.floor(this.player.getCurrentTime())
        this.sliderMax = Math.floor(this.player.getDuration())
      }
    },

    // 格式化毫秒，返回String型分秒对象
    formatTime(time) {
      // 如果没获取到
      if (!time) return { min: '00', sec: '00' }
      return {
        min: Math.floor(time / 60).toString().padStart(2, '0'),
        sec: Math.floor(time % 60).toString().padStart(2, '0')
      }
    },

    // 格式化毫秒数，对应elm滑块组件
    formatTooltip(val) {
      const time = this.formatTime(val)
      return `${time.min}:${time.sec}`
    },

    // 滑块松动后触发。更新当前时长，
    // 时长发生变动会init里的方法进行更新数据
    sliderChange(val) {
      this.player.seek(this.sliderVal)
    },

    // 倍速改变时
    changeRate(t) {
      if (t === '正常') t = 1;
      this.rateVal = t
      this.player.setSpeed(t)
      this.isShowRateList = false
    },
  }
}
</script>

视频播放代码：

<template>
  <div class="wrap">
    <!-- 视频区域 -->
    <div class="video" :class="{'w1': sideBarFlag}">

      <!-- 视频 -->
      <div class="player" id="aliVideoPlayer"></div>

    </div>

    <!-- 侧边栏区域 -->

  </div>
</template>

<script>
import { courseStore } from "@/store/course.js";
import { tokenStore } from "@/store/user.js";
export default {
  layout: 'index',
async asyncData({ $axios, query }) {
    const [chapterList] = await Promise.all([
      // 获取视频资源
      // $axios.$get(`/resources/resources/video/${lessonAudioVideo.videoId}`),
      // 获取课程列表
      $axios.$get('/learning/user/project/pc/catalog/v1', {
        params: {
          projectId: query.projectId,
          courseId: query.courseId
        }
      }),
    ])
    return {
      // videoData,
      chapterList
    }
  },
  data() {
    return {
      store: courseStore(), // 课程商店
      userStore: tokenStore(), // 用户商店
      courseInfo: {},// 当前播放的课程相关信息
      player: null, // 播放器
      opener: true,
      playerUrl: '', // 播放的资源url
      vid: '', // vid + playauth
      playauth: '',
      lessonName: '', // 当前播放的课次名称
      seeked: true, // 是否可续播
      speed: 1, // 倍速
      // 侧边栏
      sideBarFlag: true,
      // 目录/笔记
      listFlag: true,
      // 学习上报定时器
      timer: null,
      // 当前视频的时间戳
      playDate: '',
    }
  },

  beforeMount() {
    this.courseInfo = this.store.getCourseInfo
    // 获取视频资源url
    // this.playerUrl = this.courseInfo.lessonAudioVideo.url
  },

  async mounted() {
    // 获取视频vid+playauth
    const videoInfo = await this.getVid()
    this.playerUrl = JSON.stringify({ 'FD': videoInfo.Fd, 'SD': videoInfo.Sd })
    // this.vid = videoInfo.VideoId
    // this.playauth = videoInfo.PlayAuth
    // 初始化播放器
    this.createPlayer()
  },

  // 销毁定时器
  beforeDestroy() {
    this.stopReportLearning()
    if (this.player) {
      this.player.dispose()
      this.player = null
    }
  },

  methods: {
    // 获取vid+playauth
    getVid() {
      return this.$axios.$get(`/file/sys/file/getVideoPlayUrl`, {
        params: {
          videoId: this.courseInfo.lessonAudioVideo.resourcesId
        }
      })
    },
    // 初始化播放器
    createPlayer() {
      let prop = {
        id: "aliVideoPlayer",

        // 资源url播放
        source: this.playerUrl,

        // vid+playauth播放
        // vid: this.vid,
        // playauth: this.playauth,
        // encryptType: '1', // 播放加密视频
        // qualitySort: "asc", // 指定排序方式，只有使用Vid + PlayAuth播放方式时支持。
        // format: "m3u8", // 指定播放地址格式，只有使用vid的播放方式时支持可选值。
        // definition: "FD,LD,SD,HD,OD,2K,4K", // 此值是vid对应流清晰度的一个子集，仅H5模式支持。
        // defaultDefinition: 'SD', // 默认视频清晰度，此值是vid对应流的一个清晰度，仅H5模式支持。

        mediaType: "video",
        width: "100%",
        height: "100%",
        autoplay: true, // 自动播放
        isLive: false, // 直播
        rePlay: false, // 循环播放
        playsinline: true, //H5是否内置播放
        preload: true, //播放器自动加载
        keyShortCuts: true, // 是否启用快捷键
        language: "zh-cn", // 语言
        cover: '', //播放器默认封面图片,需要autoplay为’false’时，才生效
        controlBarVisibility: "hover", //控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在
        useH5Prism: true, //指定使用H5播放器
        components: [
          { name: 'RateComponent', type: AliPlayerComponent.RateComponent },
          { name: 'MemoryPlayComponent', type: AliPlayerComponent.MemoryPlayComponent },
          {
            name: 'QualityComponent',
            type: AliPlayerComponent.QualityComponent
          }],
        skinLayout: [
          { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
          { name: "H5Loading", align: "cc" },
          { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
          { name: "infoDisplay" },
          { name: "tooltip", align: "blabs", x: 0, y: 56 },
          { name: "thumbnail" },
          {
            name: "controlBar", align: "blabs", x: 0, y: 0,
            children: [
              { name: "progress", align: "blabs", x: 0, y: 44 },
              { name: "playButton", align: "tl", x: 15, y: 12 },
              { name: "timeDisplay", align: "tl", x: 10, y: 7 },
              { name: "fullScreenButton", align: "tr", x: 10, y: 12 },
              // { name: "subtitle", align: "tr", x: 15, y: 12 },
              // { name: "setting", align: "tr", x: 15, y: 12 },
              { name: "volume", align: "tr", x: 5, y: 10 }
            ]
          }
        ]
      }

      this.player = new Aliplayer(prop, function (player) {
        console.log("The player is created");
        player.on('sourceloaded', function (params) {
          var paramData = params.paramData
          var desc = paramData.desc
          var definition = paramData.definition
          // 获取清晰度组件并调用清晰度组件的 setCurrentQuality 设置清晰度
          player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
        })

        // 是否有设置过倍速
        if (this.speed) {
          player.setSpeed(this.speed)
        }
      })

      // 播放
      this.player.on('play', () => {
        // console.log('开始播放')
      })

      // 播放ing
      this.player.on('playing', () => {
        // console.log('播放中ing')

        this.speed = this.player.tag.playbackRate

        // 学习记录上报
        this.learningReport()
      })

      // 可以播放
      this.player.on('canplay', () => {
        if (this.seeked && this.courseInfo.duration && this.courseInfo.newestLessonId === this.courseInfo.lessonId) {
          this.seeked = false
          this.player.seek(this.courseInfo.duration)
        }
      })

      // 暂停
      this.player.on('pause', () => {
        // console.log('播放暂停')

        // 停止上报
        this.stopReportLearning()
      })

      // 播放出错
      this.player.on('error', () => {
        this.$message.error('播放出错')
      })

      // 播放完毕
      this.player.on("ended", (e) => {
        if (this.opener) {
          this.opener = false
          console.log('播放完了！！！！！')
          this.stopReportLearning()
          this.playDate = ''

          // 调用子组件方法，自动播放下一个
          this.$refs.videoList.createdPlayList(this.courseInfo.lessonId)
        }
      })
    },

    // 接受到子组件课次变化,播放新的视频
    async lessonChange(doing) {

      this.courseInfo = this.store.getCourseInfo

      // 未告知要播放时，只展示课次名字
      if (doing !== 'play') {
        this.lessonName = this.courseInfo.lessonName
        return
      }

      // 检测播放源是否相同（目前不进行检测，否则导致点击相同资源时->无法重播）
      // if (this.playerUrl !== this.courseInfo.lessonAudioVideo.url) {

      // 更改视频源  

      // TODO: url
      // this.playerUrl = this.courseInfo.lessonAudioVideo.url
      // this.player.loadByUrl(this.playerUrl)

      // TODO: vod
      const videoUrl = await this.getVid()
      // this.playerUrl = videoInfo.Sd
      // this.player.loadByUrl(this.playerUrl)
      this.player.dispose()
      this.playerUrl = JSON.stringify({ 'FD': videoUrl.Fd, 'SD': videoUrl.Sd })
      this.createPlayer()

      // TODO: vid+playauth
      // this.vid = videoInfo.VideoId
      // this.playauth = videoInfo.PlayAuth
      // this.player.replayByVidAndPlayAuth(this.vid, this.playauth)

      // } else {
      //   this.player.play()
      // }

      this.lessonName = this.courseInfo.lessonName
      this.seeked = true
      this.opener = true
    },

    // 停止上报学习记录，清楚定时器
    stopReportLearning() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    // 学习记录上报
    learningReport() {
      // 先清空
      this.stopReportLearning()

      const courseInfo = this.courseInfo
      const lessonAudioVideo = this.courseInfo.lessonAudioVideo

      if (this.playDate === '') {
        const nowDate = new Date
        this.playDate = nowDate.getTime()
        // console.log(this.playDate)
      }

      // 学次唯一值
      const userInfo = this.userStore.getUserInfo
      const key = `${userInfo.userId}_${courseInfo.orderId}_${courseInfo.projectId}_${courseInfo.courseId}_${courseInfo.lessonId}_${this.playDate}`;
      const sessionKey = this.$md5(key)

      this.timer = setInterval(() => {
        const curTime = parseInt(this.player.getCurrentTime())
        this.$axios.$post('/hadoop/learning/learningRecordSend', {
          sessionKey: sessionKey,
          orderId: courseInfo.orderId,
          projectId: courseInfo.projectId,
          courseId: courseInfo.courseId,
          courseCatalogId: courseInfo.lessonId,
          resourceType: lessonAudioVideo.type,
          resourceId: lessonAudioVideo.videoId,
          duration: curTime
        }).then(() => { }).catch((err) => {
          if (err.code === 10009) this.player.pause()
        });
      }, 5000)
    }
  }
}
</script>