@sweet-player/react 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @sweet-player/react
|
|
2
|
+
|
|
3
|
+
[@sweet-player/core](https://www.npmjs.com/package/@sweet-player/core) 的 React 组件封装，支持 React 18 / 19。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sweet-player/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { useRef } from 'react';
|
|
15
|
+
import { SweetPlayer, type SweetPlayerCore } from '@sweet-player/react';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
const ref = useRef<SweetPlayerCore | null>(null);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<SweetPlayer
|
|
22
|
+
ref={ref}
|
|
23
|
+
src="https://example.com/video.m3u8"
|
|
24
|
+
title="影片标题"
|
|
25
|
+
id="ep-01"
|
|
26
|
+
volume={80}
|
|
27
|
+
seekStep={10}
|
|
28
|
+
autoNext={5}
|
|
29
|
+
onNext={() => console.log('next')}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// 通过 ref 访问播放器实例
|
|
35
|
+
ref.current?.seekBy(30);
|
|
36
|
+
ref.current?.setRate(1.5);
|
|
37
|
+
ref.current?.toggleFullscreen();
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Props
|
|
41
|
+
|
|
42
|
+
所有 `@sweet-player/core` 的选项（除 `container`）均可作为 props 传入：
|
|
43
|
+
|
|
44
|
+
| Prop | 类型 | 说明 |
|
|
45
|
+
|------|------|------|
|
|
46
|
+
| `src` | `string` | 视频地址（.m3u8 或普通视频） |
|
|
47
|
+
| `title` | `string` | 左上角标题 |
|
|
48
|
+
| `id` | `string` | 传入后自动断点续播 |
|
|
49
|
+
| `volume` | `number` | 音量 0-100 |
|
|
50
|
+
| `seekStep` | `number` | 快进快退秒数 |
|
|
51
|
+
| `autoNext` | `boolean \| number` | 播完自动下一个（数字为倒计时秒数） |
|
|
52
|
+
| `locale` | `string` | 语言（内置 zh-CN / en） |
|
|
53
|
+
| `plugins` | `SweetPlayerPlugin[]` | 插件列表 |
|
|
54
|
+
| `onPrev` | `() => void` | 上一个回调 |
|
|
55
|
+
| `onNext` | `() => void` | 下一个回调 |
|
|
56
|
+
| ... | | [完整选项见 core 文档](https://www.npmjs.com/package/@sweet-player/core) |
|
|
57
|
+
|
|
58
|
+
## Ref
|
|
59
|
+
|
|
60
|
+
通过 `ref` 获取 `SweetPlayer` 实例，可调用所有实例方法：
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
ref.current?.play();
|
|
64
|
+
ref.current?.pause();
|
|
65
|
+
ref.current?.seek(60);
|
|
66
|
+
ref.current?.setVolume(50);
|
|
67
|
+
ref.current?.togglePip();
|
|
68
|
+
ref.current?.destroy();
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sweet-player/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "React component for sweet-player",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react19"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@sweet-player/core": "0.2.
|
|
35
|
+
"@sweet-player/core": "0.2.1"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=18"
|