@syhr/sy-player

@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);
}

🛠️ 配置选项

播放器模式

• Native 模式：使用 WebAssembly 进行软解码，支持更多格式
• Plugin 模式：使用浏览器插件进行硬解码，性能更佳
• 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
• 邮箱：[e-mail]
• GitHub：https://github.com/nikonee/sy-player

🔗 相关链接

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