封装视频播放组件

Huy大约 2 分钟

本文将介绍用 vue3 + ts + element-plus 封装一个视频播放组件。

视频播放介绍

音视频的相关 js 库有很多:

moovie.jsopen in new window 专注于电影的 HTML5 播放器;
meyda.jsopen in new window JavaScript 音频特征提取库;
howler.jsopen in new window Javascript 音频库;
flv.jsopen in new window HTML5 FLV 播放器
xgplayeropen in new window 西瓜播放器，字节开源的网络视频和音频播放器库
hls.jsopen in new window 可在支持 MSE 的浏览器中播放

本文基于 xgplayer 西瓜播放器进行二次简单封装。

封装思路

封装一个播放组件，基本的需求即是点击按钮弹出播放弹窗，关闭按钮关闭弹窗;
支持弹窗切换不同的音视频源；

西瓜播放器的简单使用:

安装
```
# 安装

$: npm install xgplayer
```

使用

<div id="player"></div>

import Player from 'xgplayer'

const player = new Player({
  id: 'player',
  url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
})

封装过程

由于字节的西瓜播放器使用起来较为简单，因此也就选择它作为切入点。在理解这几个后，实际的封装就较为简单了

<template>
  <el-dialog
    v-model="dialogVisible"
    :destroy-on-close="true"
    :append-to-body="true"
    title="视频播放"
    width="60%"
  >
    <div style="width: 100%; height: 430px">
      <div id="player"></div>
    </div>
    <template #footer>
      <el-button @click="handleDownload">下载</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="PlayerDialog">
import { ref, nextTick } from 'vue'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'

// 定义props类型
interface DialogProps {
  src: string
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  src: '',
})

const handleDownload = () => {
  window.open(dialogProps.value.src, '_blank')
}

// 接收父组件参数
const acceptParams = (params: DialogProps): void => {
  dialogProps.value = params
  dialogVisible.value = true
  nextTick(() => {
    new Player({
      id: 'player',
      url: params.src,
      height: '100%',
      width: '100%',
    })
  })
}

// 暴露给父组件进行调用
defineExpose({
  acceptParams,
})
</script>

组件的使用：

<template>
  <el-button @click="handleOpenDialog">播放</el-button>
  <!-- 视频播放控件 -->
  <video-player ref="PlayerDialogRef" />
</template>

<script setup lang="ts" name="PlayerDialog">
import { ref } from 'vue'
import VideoPlayer from '@/components/VideoPlayer'

// 获取弹窗组件
const PlayerDialogRef = ref()

/** 打开播放器弹窗 */
const handleOpenDialog = (src: string) => {
  // 其他的逻辑
  const params = {
    src: src, // 传入视频播放地址
  }
  PlayerDialogRef.value.acceptParams(params)
}

封装视频播放组件

# 视频播放介绍

# 封装思路

# 封装过程

视频播放介绍

封装思路

封装过程