@somoe-net/somoe-video

基于 Vue 3 的视频播放器组件，支持 HLS / FLV 流媒体，使用 Lucide 图标。

安装

npm install @somoe-net/somoe-video

hls.js 和 flv.js 为可选依赖，按需安装：

npm install hls.js       # HLS 支持
npm install flv.js       # FLV 支持
npm install mpegts.js    # FLV HEVC 降级支持

构建版本

| 文件 | 说明 | 大小 | |------|------|------| | somoe-video.js | ES Module，流媒体库外部依赖（默认） | ~57 KB | | somoe-video.umd.cjs | UMD，流媒体库外部依赖 | ~45 KB | | somoe-video.full.js | ES Module 全量版，内置 hls.js + flv.js + mpegts.js | ~1210 KB | | somoe-video.full.umd.cjs | UMD 全量版，内置 hls.js + flv.js + mpegts.js | ~777 KB | | somoe-video.core.js | ES Module 未压缩版，用于调试 | ~79 KB | | somoe-video.css | 样式文件 | ~13 KB |

• 默认版：适用于打包工具（Webpack / Vite），流媒体库作为 peerDependencies 按需安装
• 全量版：适用于 <script> 直接引入，无需额外安装任何流媒体库
• Core 版：未压缩的 ES Module，便于调试和阅读源码

使用方式

方式一：Vue 组件（推荐）

<template>
  <SomoeVideo
    :options="{
      url: 'https://example.com/video.mp4',
      autoplay: false,
      volume: 0.6,
      controls: true
    }"
  />
</template>

<script setup>
import { SomoeVideo } from '@somoe-net/somoe-video'
import '@somoe-net/somoe-video/style.css'
</script>

方式二：Vue 插件（全局注册）

import { createApp } from 'vue'
import { SomoeVideoPlugin } from '@somoe-net/somoe-video'
import '@somoe-net/somoe-video/style.css'

const app = createApp(App)
app.use(SomoeVideoPlugin)
// 现在可在任意组件中使用 <SomoeVideo />

方式三：原生 JS

import { createSomoeVideo } from '@somoe-net/somoe-video'
import '@somoe-net/somoe-video/style.css'

const player = createSomoeVideo('#container', {
  url: 'https://example.com/video.mp4',
  controls: true,
  autoplay: false,
  volume: 0.7
})

方式四：外链 script（默认版）

需要手动引入 Vue 和流媒体库：

<link rel="stylesheet" href="https://unpkg.com/@somoe-net/somoe-video/dist/somoe-video.css">
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js@1/dist/flv.min.js"></script>
<script src="https://unpkg.com/@somoe-net/somoe-video/dist/somoe-video.umd.cjs"></script>
<script>
  SomoeVideo.createSomoeVideo('#player', {
    url: 'https://example.com/video.mp4',
    controls: true
  })
</script>

方式五：外链 script（全量版）

只需引入 Vue，流媒体库已内置：

<link rel="stylesheet" href="https://unpkg.com/@somoe-net/somoe-video/dist/somoe-video.css">
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/@somoe-net/somoe-video/dist/somoe-video.full.umd.cjs"></script>
<script>
  SomoeVideo.createSomoeVideo('#player', {
    url: 'https://example.com/live/stream.m3u8',
    streamType: 'hls',
    isLiveStream: true,
    controls: true
  })
</script>

SomoeVideoOptions

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | url | string | '' | 视频地址 | | poster | string | '' | 封面图 | | autoplay | boolean | false | 自动播放 | | loop | boolean | false | 循环播放 | | muted | boolean | false | 静音 | | volume | number | 1 | 音量 (0-1) | | theme | string | '#FF5722' | 主题色 | | controls | boolean | true | 显示控制条 | | isLiveStream | boolean | false | 是否直播流 | | streamType | 'hls' \| 'flv' \| 'auto' | 'auto' | 流媒体类型 | | objectFit | string | — | 视频 object-fit 样式，如 'cover'、'contain' | | contextMenu | ContextMenuItem[] | — | 自定义右键菜单 | | playlist | PlaylistItem[] | — | 播放列表数据 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | playing-change | (isPlaying: boolean) | 播放状态变化 | | volume-change | (volume: number, muted: boolean) | 音量变化 | | time-update | (currentTime: number, duration: number) | 时间更新 | | ended | - | 播放结束 | | playlist-select | (index: number) | 播放列表选择 |

TypeScript

interface SomoeVideoOptions {
  url: string
  poster?: string
  autoplay?: boolean
  loop?: boolean
  muted?: boolean
  volume?: number
  theme?: string
  controls?: boolean
  isLiveStream?: boolean
  streamType?: 'hls' | 'dash' | 'webrtc' | 'flv' | 'auto'
  objectFit?: string
  contextMenu?: ContextMenuItem[]
  playlist?: PlaylistItem[]
}

功能特性

• MP4 / WebM 原生视频播放
• HLS 流媒体（需安装 hls.js 或使用全量版）
• FLV 流媒体（需安装 flv.js / mpegts.js 或使用全量版）
• 自动检测流类型（.m3u8 → HLS, .flv → FLV）
• FLV HEVC 编码自动降级（flv.js → mpegts.js → CDN）
• 直播模式：LIVE 标志 + 刷新 + 录制
• 录制功能（captureStream + MediaRecorder → WebM 下载）
• 点击播放/暂停，双击全屏
• 控件自动隐藏（3.8s 无操作淡出）
• 全屏模式控件自动放大
• 播放列表侧边栏
• 设置面板（画质/速度/字幕/主题）
• 右键上下文菜单
• CSS 变量主题化
• Lucide 图标

主题自定义

:root {
  --sv-primary: #FF5722;
  --sv-primary-hover: #e64a19;
  --sv-icon-size: 20px;
  --sv-icon-color: #fff;
  --sv-transition-speed: 0.3s;
  --sv-radius: 4px;
}

开发

npm run dev            # 启动 playground
npm run build          # 构建所有版本
npm run build:default  # 构建默认版（ES + UMD）
npm run build:full     # 构建全量版（UMD，内置流媒体库）
npm run build:core     # 构建 Core 版（ES，未压缩）

License

MIT