VUE3集成Jessibuca播放器实现多格式直播流播放

最新推荐文章于 2026-03-03 07:03:38 发布

原创

最新推荐文章于 2026-03-03 07:03:38 发布 · 1.1k 阅读

1. 为什么选择Jessibuca？一个纯H5直播播放器的魅力

如果你正在用Vue3开发一个需要播放直播流的项目，比如安防监控、在线教育或者直播带货，那你肯定遇到过视频格式兼容性的头疼问题。不同的浏览器对视频格式支持千差万别，尤其是那些需要低延迟的直播场景，传统的<video>标签经常力不从心。我自己在项目里就踩过不少坑，直到发现了Jessibuca这个宝藏播放器。

Jessibuca是一款纯H5直播流播放器，它的核心是把音视频解码库通过WebAssembly（Wasm）技术编译成JavaScript，直接在浏览器里运行。这意味着什么？意味着你不需要依赖任何浏览器插件，也不用担心Flash这种已经被淘汰的技术，就能在PC、手机甚至微信里流畅播放各种直播流。它特别擅长处理ws-raw、ws-flv、http-flv这些在直播领域非常常见的流媒体格式，而这些恰恰是标准<video>标签搞不定的。

我当初选择Jessibuca，主要是看中它几个实实在在的优点。首先是兼容性极好，从Chrome、Safari到移动端浏览器，基本都能通吃。其次是延迟低，对于安防监控这种对实时性要求高的场景，它能做到1秒以内的延迟，实测下来比很多商业方案都稳。最后是开源免费，社区活跃，遇到问题能找到不少解决方案。不过，它也不是万能的，比如对HLS（m3u8）的支持就不太行，如果你的流主要是HLS格式，那可能得看看其他方案。但如果你面对的是RTMP转FLV over WebSocket或者HTTP-FLV这类流，Jessibuca绝对是你的首选。

2. 项目环境准备与依赖安装

在开始写代码之前，我们得先把环境搭好。我假设你已经有了一个现成的Vue3项目，如果没有，可以用Vite快速创建一个，这比Vue CLI更轻快。

npm create vue@latest my-jessibuca-project

创建项目时，选择TypeScript和Vue Router这些你需要的特性就行。项目创建好后，我们进入正题：引入Jessibuca。Jessibuca本身不是一个可以通过npm直接安装的包，它更像一个需要你手动引入的库。你需要去它的GitHub仓库或者官网下载几个核心文件：jessibuca.js、decoder.js 和 decoder.wasm。这三个文件是播放器的核心，缺一不可。

下载下来后，我建议你在项目的public目录下创建一个jessibuca文件夹，把这些文件放进去。比如路径是public/jessibuca/。这样做的原因是，这些文件是静态资源，Webpack或Vite在打包时不会处理它们，而是原样复制到输出目录，方便我们通过相对路径引用。另一种做法是放到src/assets里，但那样可能需要配置构建工具来处理.wasm文件，稍微麻烦点。

接下来，我们需要在Vue的入口文件（比如main.ts或main.js）里全局引入Jessibuca。因为Jessibuca是通过window对象暴露的，我们需要告诉TypeScript它的类型。创建一个类型声明文件，比如src/types/jessibuca.d.ts，内容如下：

// src/types/jessibuca.d.ts
declare global {
  interface Window {
    Jessibuca: any;
  }
}
export {};

然后在你的main.ts中，通过<script>标签的方式引入，或者如果你用了Vite，可以在index.html的<head>里引入。我个人更喜欢在index.html里引入，这样更清晰：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 Jessibuca Demo</title>
    <!-- 引入Jessibuca核心文件 -->
    <script src="/jessibuca/jessibuca.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

注意，decoder.js和decoder.wasm不需要在HTML里显式引入，Jessibuca会在运行时动态加载它们。但你必须确保它们在正确的路径下，我们稍后在初始化播放器时会配置这个路径。

3. 播放器组件封装：从零到一构建可复用的播放器

环境准备好了，现在我们来封装一个可复用的Vue3播放器组件。这样做的好处是，以后在任何页面里，你只需要传入一个视频流地址，就能直接用了，非常方便。

首先，在src/components目录下创建一个JessibucaPlayer.vue文件。这个组件将负责管理Jessibuca实例的整个生命周期。我们先来搭个架子：

<!-- src/components/JessibucaPlayer.vue -->
<template>
  <div class="player-wrapper">
    <!-- 播放器容器，Jessibuca会把canvas或video画布渲染到这里 -->
    <div ref="containerRef" class="jessibuca-container"></div>
    <!-- 可以在这里添加自定义的控制栏、加载状态提示等 -->
    <div v-if="loading" class="loading-tip">视频加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';

// 定义组件接收的Props
interface Props {
  // 视频流地址，支持 ws://、wss://、http://、https://
  url: string;
  // 是否自动播放
  autoPlay?: boolean;
  // 是否静音
  muted?: boolean;
  // 宽度
  width?: number | string;
  // 高度
  height?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  autoPlay: false,
  muted: false,
  width: '100%',
  height: 360,
});

// 定义组件可以触发的事件
const emit = defineEmits<{
  (e: 'load'): void; // 播放器加载完成
  (e: 'play'): void; // 开始播放
  (e: 'pause'): void; // 暂停播放
  (e: 'error', error: any): void; // 播放错误
  (e: 'timeout'): void; // 播放超时
}>();

// 模板引用，指向容器DOM元素
const containerRef = ref<HTMLElement>();
// Jessibuca实例
const playerInstance = ref<any>(null);
// 加载状态
const loading = ref(false);

// 播放器配置项，这里先列个基础配置，后面会详细讲
const defaultOptions = {
  // 解码器路径，非常重要！指向我们放在public下的decoder.js
  decoder: '/jessibuca/decoder.js',
  // 是否显示控制栏
  showControl: true,
  // 是否支持双击全屏
  supportDblclickFullscreen: true,
  // 是否显示网速
  showBandwidth: true,
  // 超时时间（秒）
  timeout: 10,
  // 是否开启音频（如

标签