阿里播放器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>

巴特西

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

最新文章

热门文章