更新记录

2.3.0（2026-01-08） 下载此版本

1. 控制栏增强功能

   • 添加播放/暂停按钮，方便快速控制播放状态
   • 添加静音/取消静音按钮，一键切换静音状态
   • 优化控制栏布局，提升用户体验

2. 网络状态显示

   • 实时显示网络连接状态（未连接、连接中、已连接）
   • 智能判断网络质量（较差、良好、优秀）
   • 根据播放统计数据（FPS、码率、缓冲）动态评估网络状态
   • 网络状态指示器显示在控制栏，颜色和图标实时更新

3. 自动播放优化

   • 优化 H5 端自动播放逻辑
   • 初始化完成后立即尝试播放，不等待 load 事件
   • 添加备用播放机制，确保自动播放可靠性

2.2.0（2026-01-08） 下载此版本

1.0.1（2023-04-13） 下载此版本

修复已知问题

平台兼容性

uni-app(3.7.6)

uni-app x(3.6.15)

其他

sy-new-jessibuca

基于 MediaSource/WebAssembly(wasm) 实现的纯 JavaScript 直播播放器组件，支持 ws-raw、ws-flv、http-flv 多种播放格式。

📋 平台支持

功能特性

• ✅ WebSocket 流播放（ws-raw、ws-flv）
• ✅ HTTP-FLV 流播放
• ✅ 截图功能
• ✅ 全屏播放
• ✅ 音量控制（滑块 + 静音按钮）
• ✅ 播放/暂停控制
• ✅ 网络状态实时显示
• ✅ 播放质量智能评估
• ✅ 统计信息显示
• ✅ 自定义样式
• ✅ 快捷键支持
• ✅ 倍速播放
• ✅ 画中画模式
• ✅ 加载提示
• ✅ 错误重试
• ✅ 自动播放

🚀 快速开始

2. H5 平台配置

在 manifest.json 的 H5 配置中指定自定义模板：

{
  "h5": {
    "template": "uni_modules/sy-new-jessibuca/hybrid/index.html"
  }
}

3. 基础使用

<template>
  <view>
    <sy-new-jessibuca 
      :url="videoUrl"
      :width="375"
      :height="500"
      :isAuto="true"
      @load="onLoad"
      @error="onError"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const videoUrl = ref('ws://example.com/live.flv')

const onLoad = () => {
  console.log('播放器加载完成')
}

const onError = (error) => {
  console.error('播放错误:', error)
}
</script>

📖 API 文档

属性 (Props)

方法 (Methods)

通过 ref 调用组件方法：

<sy-new-jessibuca ref="playerRef" />

<script setup>
const playerRef = ref(null)

// 播放/暂停
playerRef.value?.play()

// 获取播放状态
const isPlaying = playerRef.value?.playing()

// 获取全屏状态
const isFullscreen = playerRef.value?.fullsing()

// 获取音量值（0-1）
const volume = playerRef.value?.volumeing()

// 获取播放器实例
const instance = playerRef.value?.maining()

// 关闭播放器
playerRef.value?.close()

// 销毁播放器
playerRef.value?.destroy()

// 静音
playerRef.value?.mute()

// 取消静音
playerRef.value?.cancelMute()

// 进入全屏
playerRef.value?.enterFullscreen()

// 退出全屏
playerRef.value?.exitFullscreen()

// 重试播放
playerRef.value?.handleRetry()

// 设置播放倍速
playerRef.value?.setPlaybackRate(1.5) // 1.5倍速

// 画中画模式
playerRef.value?.handlePictureInPicture()
</script>

事件 (Events)

⌨️ 快捷键支持

🎨 自定义内容

组件支持通过插槽自定义内容：

<sy-new-jessibuca :url="videoUrl">
  <!-- 自定义内容，建议使用 position: absolute 定位 -->
  <view class="custom-overlay">
    <text>自定义内容</text>
  </view>
</sy-new-jessibuca>

<style>
.custom-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
}
</style>

⚙️ 配置说明

H5 平台使用 jessibuca.js 实现完整功能，支持：

核心功能

• WebSocket 流播放（ws-raw、ws-flv）
• HTTP-FLV 流播放
• 自动播放支持
• 截图功能
• 详细的统计信息
• 自定义解码器路径

播放控制

• 播放/暂停控制（控制栏按钮 + 快捷键）
• 音量控制（滑块 + 静音按钮）
• 全屏播放（支持旋转屏幕）
• 快捷键操作
• 倍速播放（0.5x - 2.0x）

状态显示

• 网络状态实时显示（未连接、连接中、已连接、网络较差、网络良好、网络优秀）
• 播放质量智能评估（根据 FPS、码率、缓冲自动判断）
• 统计信息显示（FPS、码率、缓冲等）
• 加载提示和错误提示

其他功能

• 画中画模式（提示：jessibuca 使用 canvas 渲染，原生画中画仅支持 video 元素）
• 自定义样式
• 错误重试

📄 许可证

MIT