@syhr/sy-player

基于 Vue 3 的高性能视频流播放器组件，集成原生 WASM 解码和插件播放模式，支持 H.264/H.265 编码格式的实时视频流播放。

✨ 特性

• 🚀 双模式支持：自动检测浏览器环境，智能切换原生 WASM 解码和插件播放模式
• 🎥 多编码格式：支持 H.264/H.265 编码格式
• 🌐 现代浏览器优化：基于 WebAssembly 技术，性能卓越
• 📱 响应式设计：适配不同屏幕尺寸
• 🎨 主题定制：内置明暗主题，支持样式自定义
• 🔧 易于集成：Vue 3 组件化设计，简单易用
• 📦 轻量级：优化打包体积，按需加载

📦 安装

# npm
npm install @syhr/sy-player

# yarn
yarn add @syhr/sy-player

# pnpm
pnpm add @syhr/sy-player

🚀 快速开始

基础用法

<template>
  <div class="video-container">
    <SyPlayer :url="videoUrl" :theme="theme" @play="onPlay" @pause="onPause" @error="onError" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SyPlayer from '@syhr/sy-player';
import '@syhr/sy-player/style.css';

const videoUrl = ref('ws://localhost:12001');
const theme = ref('light');

const onPlay = () => {
  console.log('视频开始播放');
};

const onPause = () => {
  console.log('视频暂停');
};

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

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

全局注册

// main.js
import { createApp } from 'vue';
import SyPlayer from '@syhr/sy-player';
import '@syhr/sy-player/style.css';
import App from './App.vue';

const app = createApp(App);

// 全局注册并配置默认选项
app.use(SyPlayer, {
  url: 'ws://localhost:12001',
  ip: '127.0.0.1',
  port: '15600',
  corePath: '/path/to/core',
  workerPath: '/path/to/worker',
});

app.mount('#app');

📖 API 文档

Props

| 属性 | 类型 | 默认值 | 说明 | | ------------ | -------- | ------------- | ---------------------------------------------------- | | theme | String | 'light' | 主题模式，可选值：'light'、'dark' | | type | String | auto | 播放器模式，可选值：'native'、'plugin'、'auto' | | url | String | - | 视频流地址 | | ip | String | '127.0.0.1' | 服务器 IP 地址 | | port | String | '15600' | 服务器端口 | | corePath | String | - | WASM 核心文件路径 | | workerPath | String | - | Worker 文件路径 |

事件

| 事件名 | 参数 | 说明 | | --------- | --------- | -------------------- | | play | - | 视频开始播放时触发 | | pause | - | 视频暂停时触发 | | stop | - | 视频停止时触发 | | error | (error) | 播放出错时触发 | | ready | - | 播放器准备就绪时触发 | | loading | - | 视频加载中时触发 |

方法

通过 ref 获取组件实例，调用以下方法：

<template>
  <SyPlayer ref="playerRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const playerRef = ref(null);

onMounted(() => {
  // 获取播放器实例
  const player = playerRef.value.player;

  // 调用播放器方法
  player.play();
});
</script>

| 方法名 | 参数 | 返回值 | 说明 | | ------------------- | -------- | -------- | -------------- | | play() | - | void | 开始播放 | | pause() | - | void | 暂停播放 | | stop() | - | void | 停止播放 | | destroy() | - | void | 销毁播放器 | | setVolume(volume) | number | void | 设置音量 (0-1) | | getVolume() | - | number | 获取当前音量 |

插槽

| 插槽名 | 说明 | | ------------- | ------------------------------ | | empty | 无视频流时的占位内容 | | description | 视频描述信息区域 | | default | 默认插槽，可添加自定义控制元素 |

🎨 样式定制

CSS 变量

组件支持通过 CSS 变量进行样式定制：

.sy-player {
  /* 明亮主题 */
  --sy-player-text-color: rgba(0, 0, 0, 0.45);
  --sy-player-bg-color: #fff;
  --sy-player-border-color: #00a0e9;
  --sy-player-image-bright: 95%;
  --sy-player-loading-color: rgba(0, 0, 0, 0.75);
}

.sy-player.dark {
  /* 暗黑主题 */
  --sy-player-text-color: #eee;
  --sy-player-bg-color: #03142b;
  --sy-player-border-color: #00a0e9;
  --sy-player-image-bright: 80%;
  --sy-player-loading-color: #eee;
}

自定义样式

/* 自定义播放器容器样式 */
.sy-player {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 自定义控制栏样式 */
.sy-player .player-controls {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

🛠️ 配置选项

播放器模式

1. Native 模式：使用 WebAssembly 进行软解码，支持更多格式
2. Plugin 模式：使用浏览器插件进行硬解码，性能更佳
3. Auto 模式：自动检测浏览器环境，智能选择最优模式

静态资源配置

确保正确配置静态资源路径：

// vite.config.js
export default {
  // 其他配置...
  publicDir: 'public',
  assetsInclude: ['**/*.wasm'],
};

📋 浏览器兼容性

| 浏览器 | 版本要求 | | ------- | -------- | | Chrome | ≥ 57 | | Firefox | ≥ 52 | | Safari | ≥ 11 | | Edge | ≥ 16 |

注意：不支持 IE 浏览器，推荐使用现代浏览器以获得最佳体验。

🔧 开发

# 克隆项目
git clone https://github.com/nikonee/sy-player.git

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 构建项目
yarn build

# 代码检查
yarn lint

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

📧 联系

• 作者：syhr
• 邮箱：[email protected]
• GitHub：https://github.com/nikonee/sy-player

🔗 相关链接

• Vue 3 官方文档
• Element Plus
• WebAssembly