@somoe-net/somoe-video

@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 降级支持

构建版本

• 默认版：适用于打包工具（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

Events

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