@wecode-team/video-embed

We0 视频嵌入组件 —— 支持 Bilibili 和 YouTube 视频嵌入，自适应宽高比，零依赖。

安装

npm install @wecode-team/video-embed

快速开始

import { BilibiliVideo, YouTubeVideo, VideoEmbed } from "@wecode-team/video-embed"

// Bilibili 视频
<BilibiliVideo bvid="BV1xx411c7mD" />

// YouTube 视频
<YouTubeVideo videoId="dQw4w9WgXcQ" />

// 通用组件，自动识别链接
<VideoEmbed url="https://www.bilibili.com/video/BV1xx411c7mD" />
<VideoEmbed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

组件

<BilibiliVideo />

嵌入 Bilibili 视频。

<BilibiliVideo
  bvid="BV1xx411c7mD"   // 必填，BV 号
  page={1}               // 分P，默认 1
  danmaku={false}        // 弹幕，默认关闭
  highQuality            // 高清，默认开启
  autoplay={false}       // 自动播放，默认关闭
  aspectRatio="16:9"     // 宽高比
  borderRadius={8}       // 圆角
/>

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | bvid | string | 必填 | Bilibili BV 号 | | page | number | 1 | 分P | | highQuality | boolean | true | 高清模式 | | danmaku | boolean | false | 弹幕开关 |

<YouTubeVideo />

嵌入 YouTube 视频。

<YouTubeVideo
  videoId="dQw4w9WgXcQ"  // 必填，视频 ID
  start={30}              // 从第 30 秒开始
  controls                // 显示控制栏，默认开启
  loop={false}            // 循环播放，默认关闭
  privacyEnhanced         // 隐私增强模式，默认开启
/>

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | videoId | string | 必填 | YouTube 视频 ID | | start | number | - | 开始时间（秒） | | controls | boolean | true | 显示控制栏 | | loop | boolean | false | 循环播放 | | privacyEnhanced | boolean | true | 使用 youtube-nocookie.com |

<VideoEmbed />

通用视频嵌入，传入链接自动识别平台。

<VideoEmbed url="https://www.bilibili.com/video/BV1xx411c7mD" />
<VideoEmbed url="https://youtu.be/dQw4w9WgXcQ" />

支持的链接格式：

• https://www.bilibili.com/video/BVxxxxxx
• https://b23.tv/BVxxxxxx
• https://www.youtube.com/watch?v=xxxxxxxxxxx
• https://youtu.be/xxxxxxxxxxx
• https://www.youtube.com/embed/xxxxxxxxxxx

通用属性

以下属性适用于所有组件：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | string \| number | "100%" | 容器宽度 | | height | string \| number | - | 固定高度（设置后 aspectRatio 失效） | | aspectRatio | "16:9" \| "4:3" \| "21:9" \| "1:1" | "16:9" | 宽高比 | | autoplay | boolean | false | 自动播放 | | allowFullscreen | boolean | true | 允许全屏 | | borderRadius | number | 8 | 圆角（px） | | style | CSSProperties | - | 容器自定义样式 | | className | string | - | 容器自定义 className | | fallback | ReactNode | - | 加载中占位内容 | | title | string | - | iframe 标题（无障碍） |

工具函数

import { parseVideoUrl, buildBilibiliSrc, buildYouTubeSrc } from "@wecode-team/video-embed"

// 解析视频链接
parseVideoUrl("https://www.bilibili.com/video/BV1xx411c7mD?p=2")
// → { platform: "bilibili", id: "BV1xx411c7mD", page: 2 }

parseVideoUrl("https://youtu.be/dQw4w9WgXcQ")
// → { platform: "youtube", id: "dQw4w9WgXcQ" }

// 构建嵌入 URL
buildBilibiliSrc("BV1xx411c7mD", { danmaku: true })
buildYouTubeSrc("dQw4w9WgXcQ", { autoplay: true, start: 30 })

License

MIT