【Vue】Aliplayer 视音频播放的实践与思考

简介

阿里云Web播放器SDK（Aliplayer SDK）是阿里视频云端到云到端服务的重要一环，结合对象存储（Object Storage Service，简称OSS) 实现深度融合视频云业务，支持视音频的点播和直播等基础播放功能

本文以 Vue 组件化的角度进行全流程解析、并抽离公共业务逻辑，从而实现可维护、高复用的视音频播放组件

引入

官方实践直接在页面引入对应的JS、CSS文件，通过暴露全局 window.Aliplayer 属性自定义实例化对象，传送门 => 集成文档_Web播放器_播放器SDK_视频点播-阿里云

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>

当我们要对其封装成一个独立的组件时，可以实现一个 dynamicLoadScript 函数去解耦全局引用的问题，调用如下 ⬇️

import {
    dynamicLoadScript } from '@/utils/'
const aliplayerCDN = 'https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js'

export default {
   
  ...
  mounted () {
   
    dynamicLoadScript(aliplayerCDN, (err) => {
   
      if (err)  return this.$notify(err.message);
     
      window.addEventListener('beforeunload', this.updateLearnerTime)
      this.initAliplayer() // 初始化视频容器
      this.$once('hook:beforeDestroy', () => {
   
        window.removeEventListener('beforeunload', this.updateLearnerTime)
      })
    })
  }
}

<style lang="postcss" scoped>
  @import 'https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css';
</style>

通过 dynamicLoadScript，和 postcss 去处理文件引用，Vue hooks 提供组件挂载与销毁的回调，initAliplayer 方法进行初始化

// html => <div id="J_prismPlayer" />

export default {
   
  ...
  props: {
   
	config: {
   
	  type: Object,
	  required: true,
	  default () {
   
	     return {
   
	       url: '',      // 视频播放地址
	       cover: '',    // 封面图
	       videoId: '',  // 点播vid
	       playTime: 0,  // 续播时长
	       chapterId: '' // 章节ID
	    }
	  }
	}
  },
  data: () => ({
   
    baseConfig: {
   },   // Aliplayer 基础配置
    player: null,     // player 全局共享对象
    loading: false,   // 加载状态
    toggling: false,
    erroring: false
  }),
  methods: {
   
    initAliplayer () {
   
      const {
    cover, url: source, videoId: vid } = this.config
      const baseConfig = {
   
        cover, id: 'J_prismPlayer', width: '100%', height: '100%', autoplay: false,