使用Vue3 封装一个可直播可播放的 Xplayer 组件

Xplayer 概要

1、灵活的插件体系、PC\移动端自动切换、安全的白名单机制
2、完整的产品机制、错误的监控上报、自动的降级处理
3、完整的产品机制、错误的监控上报、自动的降级处理

官方文档：https://h5player.bytedance.com/

先上图

安装

需要用到 xgplayer 和 xgplayer-hls

pnpm install xgplayer xgplayer-hls -S

具体实现

<!-- 组件html部分 -->
<template>
  <div id="flv_live" />
</template>

// 组件js部分
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import Player, { Events } from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import HlsPlugin from 'xgplayer-hls'
defineOptions({
  name: 'Xplayer'
})
interface Props {
  url: string // 视频地址
  isLive?: boolean // 是否为直播
  poster?: string // 封面图
}
interface optionTypes {
  volume: number
  autoplay: boolean
  screenShot: boolean
  muted: boolean
  videoAttributes: { crossOrigin: string }
  hls: {
    retryCount: number
    retryDelay: number
    loadTimeout: number
    fetchOptions: { mode: string }
  }
  type: string
  url: string
  poster: string
  fluid: boolean
  playbackRate: number[]
  download: boolean
}
const props = withDefaults(defineProps<Props>(), {
  isLive: false,
  poster: ''
})
const player = ref<any>({})
const option = ref({
  // 默认静音
  volume: 0,
  autoplay: false,
  screenShot: true,
  muted: true, // 默认静音
  videoAttributes: {
    crossOrigin: 'anonymous'
  },
  hls: {
    retryCount: 3, // 重试 3 次，默认值
    retryDelay: 1000, // 每次重试间隔 1 秒，默认值
    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
    fetchOptions: {
      // 该参数会透传给 fetch，默认值为 undefined
      mode: 'cors'
    }
  },
  type: 'auto', // "auto | hls | flv | mp4 | m3u8 | dash |webm |ogg | avi | swf | mp3
  url: props.url,
  poster: props.poster,
  fluid: true,
  playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
  download: true
})
const init = (option: optionTypes, plugin = []) => {
  player.value = new Player({
    id: 'flv_live',
    lang: 'zh',
    ...option,
    plugins: [...plugin]
  })
  player.value.on(Events.LOADED_DATA, () => {
    // 加载完毕
  })
  player.value.on(Events.ERROR, (error) => {
    // 异常处理，具体可参考 https://h5player.bytedance.com/api/error.html#type
    console.log(error, 'error')
  })
}
onMounted(() => {
  // 直播
  if (props.isLive) {
    init(option.value, [HlsPlugin])
  } else {
    // 非直播
    init(option.value)
  }
})
onUnmounted(() => {
  player.value.destroy()
  player.value == null
})
</script>

使用

// 路径替换成自己
import xgplayer from './components/xgplayer/index.vue'

<!-- 直播 -->
<xgplayer url="https://xxx.xxxx/xxxx.m3u8" isLive />

<!-- 非直播 -->
<xgplayer url="https://xxx.xxx/xxxxx.mp4"/>

最终效果

小结

注意：如果需要使用 HlsPlugin，需要在引入 HlsPlugin，并在 plugins 中添加 HlsPlugin
plugins: [HlsPlugin]

但是，非直播格式的时候如：mp4，这样就不能引入直播插件，会解析错误，就有了上面的参数 isLive

也可以按照视频格式来判断是否直播，灵活性更高，可避免忘记传入 isLive的后播放不了的问题。

直播和非直播判断用了毕竟简单的方法，可自行修改。