video-content-block

React 视频内容块组件：标题、封面图、时长展示，基于 react-player 与 styled-components，支持自动解析时长与禁止下载选项。

安装

pnpm add @gulibs/video-content-block react react-dom react-player styled-components
# 或
npm i @gulibs/video-content-block react react-dom react-player styled-components

依赖

• react >= 18
• react-dom >= 18
• react-player >= 3
• styled-components >= 6

使用

import { VideoContentBlock, type VideoContentBlockProps } from "video-content-block";

<VideoContentBlock
  videoId={1}
  title="视频标题"
  url="https://example.com/video.mp4"
  thumbnail="https://example.com/poster.jpg"
  duration="1:30"
  disableDownload
  onPlay={(id) => {}}
  onStop={() => {}}
/>

Props

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | videoId | number | 是 | 视频唯一 ID，用于单播控制 | | title | string | 是 | 标题 | | url | string | 是 | 视频地址 | | duration | string | 否 | 时长展示（如 "1:30"），为空时从元数据自动解析 | | thumbnail | string | 否 | 封面图 URL | | videoSrc | string | 否 | 实际播放地址，不传则用 url | | isPlaying | boolean | 否 | 受控播放状态（单视频模式） | | disableDownload | boolean | 否 | 禁止下载：隐藏下载按钮、禁用右键与画中画 | | onPlay | (videoId: number) => void | 否 | 开始播放回调 | | onStop | () => void | 否 | 停止播放回调 |

本地开发（当前仓库）

在项目根目录：

cd video-content-block
pnpm install
pnpm build

根项目通过 "video-content-block": "file:./video-content-block" 引用本地包，安装依赖后即可使用。

License

MIT