Etuo Player Vue

基于Vue3和Jessibuca的流媒体播放器组件。

功能特性

• ✅ 支持 H.264/H.265 视频流播放
• ✅ 支持 HTTP-FLV、WS-FLV、HLS、WebRTC、RTMP、RTSP 等协议
• ✅ 基于 WebAssembly 的高性能解码
• ✅ 支持全屏、截图、录制等功能
• ✅ TypeScript 类型支持
• ✅ 轻量级，易于集成
• ✅ 自动加载 decoder.js 和 jessibuca.js，无需手动配置路径

安装

npm install etuo-player-vue

引入方式

方式一：局部引入（推荐）

<template>
  <div class="player-container">
    <EtuoPlayer
      ref="playerRef"
      :link="link"
      :config="playerConfig"
      @ready="onReady"
      @error="onError"
    />
  </div>
  <div class="controls">
    <button @click="playStream">播放</button>
    <button @click="destroyPlayer">销毁</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import EtuoPlayer from 'etuo-player-vue'
import type { PlayerRef } from 'etuo-player-vue/types/player'

const playerRef = ref<(InstanceType<typeof EtuoPlayer> & PlayerRef) | null>(
  null,
)
const link = ref('your-stream-url.flv')
const playerConfig = {
  debug: false,
  useMSE: true,
  isNotMute: false,
  showBandwidth: true,
  loadingTimeout: 10,
  heartTimeout: 10,
  videoBuffer: 0.6,
  isResize: true,
  isFlv: true,
  operateBtns: {
    fullscreen: true,
    screenshot: true,
    play: true,
    audio: true,
    record: true,
  },
}

const onReady = () => {
  console.log('播放器已就绪')
  playStream()
}

const onError = (error: Error) => {
  console.error('播放器错误:', error)
}

const playStream = () => {
  if (playerRef.value) {
    playerRef.value.play(link.value)
  }
}

const destroyPlayer = () => {
  if (playerRef.value) {
    playerRef.value.destroy()
  }
}
</script>

<style scoped>
.player-container {
  width: 822px;
  height: 500px;
  background-color: #000000;
}
.controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
</style>

方式二：全局引入

在main.ts中全局注册组件：

import { createApp } from 'vue'
import App from './App.vue'
import EtuoPlayer from 'etuo-player-vue'
import 'etuo-player-vue/style.css'

const app = createApp(App)
app.use(EtuoPlayer) // 全局注册
app.mount('#app')

然后在任何组件中直接使用：

<template>
  <EtuoPlayer link="your-stream-url.flv" :config="playerConfig" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { PlayerRef } from 'etuo-player-vue/types/player'

const playerRef = ref<PlayerRef | null>(null)

const playerConfig = {
  debug: false,
  useMSE: true,
  isNotMute: false,
  showBandwidth: true,
  loadingTimeout: 10,
  heartTimeout: 10,
  videoBuffer: 0.6,
  isResize: true,
  isFlv: true,
  operateBtns: {
    fullscreen: true,
    screenshot: true,
    play: true,
    audio: true,
    record: true,
  },
}
</script>

API

Props

| 属性名 | 类型 | 默认值 | 说明 | | ------ | ------ | ------ | ------------------ | | link | string | - | 播放的流地址 | | config | object | {} | Jessibuca 配置对象 |

Events

| 事件名 | 参数 | 说明 | | ------ | ------------ | -------------------- | | ready | - | 播放器准备就绪时触发 | | error | error: Error | 播放器错误时触发 |

暴露的方法

| 方法名 | 参数 | 说明 | | ------- | ----------- | --------------- | | play | url: string | 播放指定URL的流 | | destroy | - | 销毁播放器实例 |

Jessibuca配置

可以通过config属性自定义Jessibuca播放器的配置，支持以下选项：

{
  container: HTMLElement; // 容器元素（自动设置）
  debug?: boolean; // 是否开启调试模式
  useMSE?: boolean; // 是否使用MSE
  isNotMute?: boolean; // 是否不静音
  showBandwidth?: boolean; // 是否显示带宽
  loadingTimeout?: number; // 加载超时时间（秒）
  heartTimeout?: number; // 心跳超时时间（秒）
  videoBuffer?: number; // 视频缓冲时间（秒）
  isResize?: boolean; // 是否自适应大小
  isFlv?: boolean; // 是否为FLV流
  operateBtns?: { // 操作按钮配置
    fullscreen?: boolean;
    screenshot?: boolean;
    play?: boolean;
    audio?: boolean;
    record?: boolean;
  };
  // ...其他Jessibuca支持的配置
}

注意事项

1. 播放器容器需要有明确的高度和宽度
2. decoder.js、jessibuca.js和decoder.wasm文件已由插件自动处理，无需手动配置
3. 如需自定义资源加载方式，可通过decoderPath、jessibucaPath和wasmPath属性进行设置