vue-阿里云播放器的用法

2021-01-28

前言

项目需求：视频点播。选择阿里云播放器的原因是支持视频加密播放，防止用户下载视频。

vue-alipayer-v2

这是一个基于Alipayer 开发并封装成vue组件的播放器。

安装使用

1
2
3

npm i vue-aliplayer-v2 --save
or
yarn add vue-aliplayer-v2

全局注册 main.js

1
2
3

import VueAliplayerV2 from 'vue-aliplayer-v2';

Vue.use(VueAliplayerV2);

局部注册 App.vue

1 2	import VueAliplayerV2 from 'vue-aliplayer-v2'; components:{ VueAliplayerV2: VueAliplayerV2.Player }

具体用法

1
2
3

<div v-if="showAliPlayer">
    <vue-aliplayer-v2 :class="{'has-learned': prevtime === totalDuration}" ref="VueAliplayerV2" :options="options" @ready="ready" @ended="ended" @timeupdate="timeUpDate"/>
</div>

这里使用v-if判断是否显示是为了解决组件在没有正确时间初始化的问题

播放器配置（options）

// 播放器配置
        options: {
          width: "100%",
          height: "40vw",
          controlBarVisibility: 'always',
          format: 'm3u8',
          qualitySort:'desc',
          definition:'FD,LD,SD',
          defaultDefinition:'FD',
          //设置阿里云播放器的样式
          skinLayout: [{
            name: "bigPlayButton",
            align: "blabs",
            x: 30,
            y: 80
          },
            {
              name: "H5Loading",
              align: "cc"
            },
            {
              name: "errorDisplay",
              align: "tlabs",
              x: 0,
              y: 0
            },
            {
              name: "controlBar", align: "blabs", x: 0, y: 0,
              children: [
                {name: "progress", align: "blabs", x: 0, y: 44},
                {name: "playButton", align: "tl", x: 10, y: 12},
                {name: "timeDisplay", align: "tl", x: 10, y: 5},
                {name: "fullScreenButton", align: "tr", x: 10, y: 12},
                {name:"setting", align:"tr",x:10, y:12},
                {name: "volume", align: "tr", x: 10, y: 10}
              ]
            }
          ],
        },

播放器方法

如何获取实例？

在组件中通过定义ref值来获取。

1	<vue-aliplayer-v2 :class="{'has-learned': prevtime === totalDuration}" ref="VueAliplayerV2" :options="options" @ready="ready" @ended="ended" @timeupdate="timeUpDate"/>

最后通过实例来获取播放器中的方法。

this.$refs.VueAliplayerV2.play() 
this.$refs.VueAliplayerV2.pause();
this.$refs.VueAliplayerV2.seek(20) 
......

播放器事件

看源码可以知道，监听播放器方法，需要通过 @ready=”ready”的写法监听。其实就是父子组件之间的写法。

1、ready事件：播放器视频初始化按钮渲染完毕。在这里可以触发视频播放器的播放方法。
1
2
>this.$refs.VueAliplayerV2.play()   //触发视频播放
>this.$refs.VueAliplayerV2.seek(this.prevtime)   //让视频在某个指定时间点触发播放
2、ended事件：当前视频播放完毕时触发。

可以在这个方法中执行某个操作。比如：我在项目中让视频播放结束后请求学习记录的接口，表示这个视频已经学习结束。

3、timeUpDate事件：播放位置发生改变时触发，仅H5播放器。可通过getCurrentTime方法，得到当前播放时间。当然，这个事件1秒内会执行多次。在遇到监听视频到某一秒执行某个操作这样的需求时，需要先将获取到的时间点取整，并在操作最后记录这个取整的时间。等第二次获取到这个时间点时，如何两个时间相等，那说明这是在同一秒内的操作，就不让执行。
1
2
3
4
5
6
>this.currentTime = parseInt(this.$refs.VueAliplayerV2.getCurrentTime())
>// 设定了一个当前的取整时间，判断当前的整数时间等于上传的整数时间，说明这还是在同一秒不执行代码
>if (this.currentTime !== this.lastCurrentTime) {
  //执行操作
}
>this.lastCurrentTime = this.currentTime

具体代码：

// 监听视频播放update事件
      timeUpDate() {
        this.currentTime = parseInt(this.$refs.VueAliplayerV2.getCurrentTime())
        // 设定了一个当前的取整时间，判断当前的整数时间等于上传的整数时间，说明这还是在同一秒不执行代码
        if (this.currentTime !== this.lastCurrentTime) {
          if (this.prevtime < this.totalDuration) {
            // 禁止快进
            if(this.currentTime > this.prevtime && this.currentTime - this.lastCurrentTime > 2){
              this.$refs.VueAliplayerV2.seek(this.lastCurrentTime)
            }

            // 监听断点，学员进行测试
            this.breakPointList.forEach(item => {
              console.log(this.currentTime)
              if (this.currentTime === item) {
                this.questionDialogVisible = true;
                this.$refs.VueAliplayerV2.pause()
                this.currentBreakPoint = item
                this.showPaper = false
                this.disabledStatus = false
                this.getPaperQuestions(this.currentChapterId, this.currentBreakPoint)
              }
            })

            // 时长统计
            if (this.currentTime - this.lastCurrentTime < 2 && this.currentTime - this.prevtime >= 60 && this.currentTime > this.prevtime) {
              this.prevtime = this.currentTime;
              let data = {
                video_id: this.videoDetail.id,
                chapter_id: this.currentChapterId,
                learn_duration: this.currentTime,
                push_event: 'update'
              }
              this.addLearnRecord(data, 'update')
            }
            this.lastCurrentTime = this.currentTime
          }

        }
        this.lastCurrentTime = this.currentTime
      },
      ready(){
        console.log('ready')
        this.$nextTick(() => {
          if (this.prevtime === this.totalDuration) {
            this.$refs.VueAliplayerV2.play()
          } else {
            this.$refs.VueAliplayerV2.seek(this.prevtime)
          }
        })
      },
      ended() {
        //监听end事件
        let data = {
          video_id: this.videoDetail.id,
          chapter_id: this.currentChapterId,
          learn_duration: this.totalDuration,
          push_event: 'ended'
        }
        this.addLearnRecord(data, 'end')
      },

如何覆盖播放器的样式？

需求：阿里云播放器实现倍速播放以及切换分辨率播放，只要在配置中设置即可。但项目中要求学生在学习过程中不能倍速播放，就需要将倍速的按钮隐藏掉。所以就在思考如何通过样式隐藏播放器。

注意：如果要覆盖播放器的样式，不能再style中设置scoped，要不然就不会生效。

方法：:class=”{‘has-learned’: prevtime === totalDuration}”

设置一个动态类，通过这个动态类实现动态显示和隐藏。
1
><vue-aliplayer-v2 :class="{'has-learned': prevtime === totalDuration}" ref="VueAliplayerV2" :options="options" @ready="ready" @ended="ended" @timeupdate="timeUpDate"/>

<style type="text/css">
  .prism-player{
    ::v-deep .prism-setting-speed{
      display: none !important;
    }
    ::v-deep .prism-progress{
      pointer-events: none;
    }
  }
  .has-learned.prism-player{
    ::v-deep .prism-setting-speed{
      display: block !important;
    }
  }
  .has-learned.prism-player{
    ::v-deep .prism-progress{
      pointer-events: auto;
    }
  }
</style>

参考链接：

vue-alipayer-v2

配置阿里云播放器

阿里云播放器文档-属性和接口说明