@greentourasia/video
v0.1.0
Published
React video component library focused on m3u8 / HLS playback.
Readme
gta-video
gta-video 是一个基于 React 的视频组件库，专注于 m3u8 / HLS 播放能力。
它现在的底层实现是 native video + hls.js，并提供了几类常用组件：
VideoPlayer：通用横向播放器LandscapeVideo：横向视频播放页核心组件PortraitVideo：PC 端竖向短视频组件PortraitVideoMobile：移动端竖向短视频组件VideoPreview / PcVideoPreview / ShortVideoPreview：视频预览组件
样式已经跟随组件一起打包，外部使用时不需要再额外引入 CSS 文件。
安装
npm install @greentourasia/video对外导出
当前 npm 包主入口只导出这些组件：
import {
VideoPlayer,
LandscapeVideo,
PortraitVideo,
PortraitVideoMobile,
VideoPreview,
PcVideoPreview,
ShortVideoPreview,
} from '@greentourasia/video';最小使用示例
1. 通用播放器
import { VideoPlayer } from '@greentourasia/video';
export default function App() {
return (
<VideoPlayer
url="https://example.com/video/master.m3u8"
title="示例视频"
poster="https://example.com/poster.jpg"
/>
);
}2. 横向视频
import { LandscapeVideo } from '@greentourasia/video';
const videos = [
{
id: 1,
title: '横向视频示例',
url: 'https://example.com/video/master.m3u8',
cover: 'https://example.com/poster.jpg',
},
];
export default function App() {
return <LandscapeVideo videos={videos} />;
}3. PC 短视频
import { PortraitVideo } from '@greentourasia/video';
const videos = [
{
id: 1,
title: '短视频示例',
url: 'https://example.com/video/master.m3u8',
cover: 'https://example.com/poster.jpg',
},
];
export default function App() {
return <PortraitVideo videos={videos} />;
}4. 移动端短视频
import { PortraitVideoMobile } from '@greentourasia/video';
const videos = [
{
id: 1,
title: '移动端短视频示例',
url: 'https://example.com/video/master.m3u8',
cover: 'https://example.com/poster.jpg',
},
];
export default function App() {
return <PortraitVideoMobile videos={videos} />;
}5. 预览组件
import { PcVideoPreview, ShortVideoPreview } from '@greentourasia/video';
export default function App() {
return (
<>
<PcVideoPreview
src="https://example.com/video/master.m3u8"
poster="https://example.com/poster.jpg"
title="PC 预览"
/>
<ShortVideoPreview
src="https://example.com/video/master.m3u8"
poster="https://example.com/poster.jpg"
title="短视频预览"
/>
</>
);
}示例工程
仓库里现在有这些示例页面：
examples/pc-youtube-page：横向视频示例examples/pc-short-video：PC 短视频示例examples/mobile-short-vide：移动端短视频示例examples/pc-video-preview：预览组件示例入口examples/shared：示例数据与路径常量
当前实际目录结构
下面这份目录是按当前仓库真实结构整理的：
gta-video/
├─ package.json
├─ package-lock.json
├─ README.md
├─ CHANGELOG.md
├─ LICENSE
├─ babel.config.js
├─ eslint.config.js
├─ rollup.config.js
├─ tsconfig.json
├─ vite.config.js
├─ index.html
├─ .gitignore
├─ .npmignore
├─ .prettierignore
├─ .prettierrc
│
├─ scripts/
│ ├─ build.js
│ ├─ clean.js
│ └─ release.js
│
├─ examples/
│ ├─ mobile-short-vide/
│ │ ├─ index.html
│ │ ├─ main.jsx
│ │ └─ style.css
│ ├─ pc-short-video/
│ │ ├─ index.html
│ │ ├─ main.jsx
│ │ └─ style.css
│ ├─ pc-video-preview/
│ │ ├─ index.html
│ │ ├─ main.jsx
│ │ └─ style.css
│ ├─ pc-youtube-page/
│ │ ├─ index.html
│ │ ├─ main.jsx
│ │ └─ style.css
│ └─ shared/
│ ├─ demoMedia.js
│ └─ demoVideos.js
│
├─ src/
│ ├─ index.js
│ ├─ style.css
│ │
│ ├─ landscapeVideo/
│ │ ├─ index.js
│ │ ├─ index.jsx
│ │ ├─ style.css
│ │ ├─ components/
│ │ │ ├─ landscapeEndedMask.jsx
│ │ │ ├─ landscapePlayer.jsx
│ │ │ └─ landscapeSkeleton.jsx
│ │ └─ hooks/
│ │ └─ useLandscapeVideo.js
│ │
│ ├─ portraitVideo/
│ │ ├─ index.js
│ │ ├─ index.jsx
│ │ ├─ mobile.jsx
│ │ ├─ style.css
│ │ ├─ mobile.css
│ │ ├─ components/
│ │ │ ├─ portraitBottomLoading.jsx
│ │ │ ├─ portraitDefaultOverlay.jsx
│ │ │ ├─ portraitEmpty.jsx
│ │ │ ├─ portraitLoading.jsx
│ │ │ ├─ portraitMobileDefaultOverlay.jsx
│ │ │ ├─ portraitPlayer.jsx
│ │ │ ├─ portraitVideoItem.jsx
│ │ │ └─ portraitVideoList.jsx
│ │ └─ hooks/
│ │ ├─ useMobileSwipe.js
│ │ ├─ usePortraitAutoPlay.js
│ │ ├─ usePortraitKeyboard.js
│ │ ├─ usePortraitLoop.js
│ │ ├─ usePortraitMute.js
│ │ ├─ usePortraitPreload.js
│ │ ├─ usePortraitReadyState.js
│ │ ├─ usePortraitVideos.js
│ │ ├─ usePortraitVolume.js
│ │ └─ usePortraitWheel.js
│ │
│ ├─ types/
│ │ └─ index.d.ts
│ │
│ ├─ videoPlayer/
│ │ ├─ constants.js
│ │ ├─ index.jsx
│ │ ├─ style.css
│ │ ├─ types.js
│ │ ├─ utils.js
│ │ ├─ audio/
│ │ │ └─ effects.js
│ │ ├─ controls/
│ │ │ ├─ bottomControlBar.jsx
│ │ │ ├─ centerPlayOverlay.jsx
│ │ │ ├─ controlActions.jsx
│ │ │ ├─ fullScreenButton.jsx
│ │ │ ├─ icons.jsx
│ │ │ ├─ index.jsx
│ │ │ ├─ playButton.jsx
│ │ │ ├─ progressBar.jsx
│ │ │ ├─ settingsPanel.jsx
│ │ │ ├─ settingsRows.jsx
│ │ │ ├─ style.css
│ │ │ ├─ subtitleButton.jsx
│ │ │ ├─ timeDisplay.jsx
│ │ │ ├─ volumeButton.jsx
│ │ │ └─ hooks/
│ │ │ ├─ useControlsVisibility.js
│ │ │ └─ useSettingsPanel.js
│ │ ├─ hlsPlayer/
│ │ │ ├─ adapter.js
│ │ │ ├─ checker.js
│ │ │ ├─ defaultConfig.js
│ │ │ ├─ events.js
│ │ │ ├─ hook.js
│ │ │ ├─ index.jsx
│ │ │ ├─ instance.js
│ │ │ ├─ methods.js
│ │ │ ├─ style.css
│ │ │ └─ utils.js
│ │ ├─ hooks/
│ │ │ ├─ usePlaybackSource.js
│ │ │ ├─ usePlayerEvents.js
│ │ │ ├─ usePlayerFullscreen.js
│ │ │ ├─ usePlayerInstance.js
│ │ │ ├─ usePlayerKeyboard.js
│ │ │ ├─ usePlayerProgress.js
│ │ │ ├─ usePlayerRetry.js
│ │ │ └─ useVideoPlayer.js
│ │ ├─ mask/
│ │ │ ├─ endedMask.jsx
│ │ │ ├─ errorMask.jsx
│ │ │ ├─ loadingMask.jsx
│ │ │ ├─ pauseMask.jsx
│ │ │ └─ style.css
│ │ ├─ playbackRate/
│ │ │ ├─ constants.js
│ │ │ ├─ index.jsx
│ │ │ └─ usePlaybackRatePanel.js
│ │ ├─ quality/
│ │ │ ├─ index.js
│ │ │ ├─ qualityMenu.jsx
│ │ │ └─ utils.js
│ │ └─ subtitle/
│ │ ├─ index.jsx
│ │ ├─ style.css
│ │ ├─ subtitleTrack.jsx
│ │ └─ utils.js
│ │
│ └─ videoPreview/
│ ├─ index.js
│ ├─ pcVideoPreview.jsx
│ ├─ shortVideoPreview.jsx
│ ├─ style.css
│ ├─ useVideoPreview.js
│ ├─ videoPreview.jsx
│ └─ videoPreviewManager.js
│
└─ dist/
├─ index.cjs
├─ index.cjs.map
├─ index.js
└─ index.js.map开发命令
npm install
npm run dev
npm run lint
npm run typecheck
npm run build说明
- 现在库的主播放链路已经不再依赖 Aliyun SDK
hls.js已经作为包内依赖打进最终产物- 外部使用时只需要引组件，不需要再额外引
style.css examples目录里的页面主要是演示调用方式，不代表业务页面必须长成那样