@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

事件

方法

通过 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>

插槽

🎨 样式定制

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'],
};

📋 浏览器兼容性

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

🔧 开发

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

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 构建项目
yarn build

# 代码检查
yarn lint

📄 许可证

MIT

🤝 贡献

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

📧 联系

• 作者：syhr
• 邮箱：aiops.sieyuan@gmail.com
• GitHub：https://github.com/nikonee/sy-player

🔗 相关链接

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