common-player

基于 Jessibuca 的 Vue2 视频播放组件，支持 H265/H264 编码的 WebSocket-FLV、HTTP-FLV 等流媒体播放。

零配置，开箱即用 — 安装后自动完成 Jessibuca 脚本注入、解码器拷贝、Vue 原型挂载，无需手动添加 <script> 标签。

安装

npm install common-player

安装时自动执行：

• ✅ 将 jessibuca.js / decoder.js / decoder.wasm 拷贝到项目的 public/js/Jessibuca/
• ✅ 无需手动在 index.html 中加 <script> 标签

使用方式

方式一：全局注册（推荐）

在 main.js 中使用 Vue.use()，即可在所有页面直接用 <common-player> 标签。

import Vue from "vue";
import CommonPlayer from "common-player";

Vue.use(CommonPlayer);

也可通过命名导入 CommonPlayer 或 CommonPlayerDiff（二者功能完全相同）：

import { CommonPlayer } from "common-player";
Vue.use(CommonPlayer);

// 或
import { CommonPlayerDiff } from "common-player";
Vue.use(CommonPlayerDiff);

带自定义配置：

Vue.use(CommonPlayer, {
  decoder: "/custom-path/decoder.js",         // 自定义解码器路径
  jessibucaSrc: "/custom-path/jessibuca.js",  // 自定义 Jessibuca 脚本路径
});

方式二：局部注册

只用在单个组件中引入，不全局注册：

import { PlayerComponent } from "common-player";

export default {
  components: { CommonPlayer: PlayerComponent },
  // ...
};

在页面组件中使用

<template>
  <div class="video-player-container">
    <common-player
      v-if="videoUrl"
      :idIndex="999"
      :videoUrl="videoUrl"
      :configFa="{ isFlv: true }"
      @player-created="handlePlayerCreated"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: null,
      myPlayerObj: null,
    };
  },
  mounted() {
    this.videoUrl = "ws://example.com/live/stream.flv";
  },
  methods: {
    handlePlayerCreated(e) {
      const { index, player, err } = e;
      this.myPlayerObj = player;
    },
  },
};
</script>

<style scoped>
.video-player-container {
  width: 600px;
  height: 337px;
}
</style>

导出清单

| 导出名 | 类型 | 用途 | |--------|------|------| | CommonPlayer（默认导出） | Object { install } | 配合 Vue.use() 全局注册 | | CommonPlayer（命名导出） | Object { install } | 同默认导出 | | CommonPlayerDiff（命名导出） | Object { install } | 功能与 CommonPlayer 完全相同，别名 | | PlayerComponent（命名导出） | Vue Component | 原始组件对象，用于局部 components 注册 |

组件参数

| 参数 | 类型 | 默认值 | 必传 | 说明 | |------|------|--------|------|------| | idIndex | Number | 999 | 否 | 多窗口播放时用于区分 | | videoUrl | String | — | 是 | 视频流地址（支持 ws-flv / http-flv） | | autoplay | Boolean | true | 否 | 是否自动播放 | | configFa | Object | {} | 否 | 自定义 Jessibuca 配置项 |

事件

| 事件 | 参数 | 说明 | |------|------|------| | @player-created | { index, player, err } | 播放器创建完成 / 出错时触发 |

configFa 常用配置

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | isFlv | Boolean | false | 是否为 FLV 流 | | hasAudio | Boolean | true | 是否有音频 | | isResize | Boolean | true | 是否自适应容器 | | debug | Boolean | false | 调试模式 |

更多配置请参考 Jessibuca 官方文档。

工作原理

npm install common-player
  ├── postinstall → 拷贝 jessibuca.js / decoder.js / decoder.wasm → public/js/Jessibuca/

Vue.use(CommonPlayer)
  ├── 动态注入 <script src="/js/Jessibuca/jessibuca.js">
  ├── 脚本加载完成后自动设置 Vue.prototype.$player = window.Jessibuca
  ├── 设置 Vue.prototype.$jessibucaConfig（含 decoder 路径）
  └── 全局注册 <common-player> 组件

消费者项目中你只需要做：

1. npm install common-player
2. Vue.use(CommonPlayer) 或 Vue.use(CommonPlayerDiff)
3. 在模板中使用 <common-player>

无需：手动 <script> 标签、手动拷贝静态文件、手动挂载原型。

本地开发

npm install
npm run serve       # 本地调试（带设备树演示界面）
npm run lib         # 构建 npm 包产物到 dist/ 目录

注意事项

1. 容器宽高：组件默认最小宽高 300×169px，请确保父容器有明确尺寸
2. 多窗口播放：多个 <common-player> 需设置不同的 idIndex
3. 解码器路径：可通过 Vue.use(plugin, { decoder: "..." }) 自定义