@sweet-player/vue 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 +80 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @sweet-player/vue
|
|
2
|
+
|
|
3
|
+
[@sweet-player/core](https://www.npmjs.com/package/@sweet-player/core) 的 Vue 3 组件封装。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sweet-player/vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
import { ref } from 'vue';
|
|
16
|
+
import { SweetPlayer } from '@sweet-player/vue';
|
|
17
|
+
import type { SweetPlayerCore } from '@sweet-player/vue';
|
|
18
|
+
|
|
19
|
+
const player = ref<SweetPlayerCore | null>(null);
|
|
20
|
+
|
|
21
|
+
function onReady(p: SweetPlayerCore) {
|
|
22
|
+
player.value = p;
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<SweetPlayer
|
|
28
|
+
src="https://example.com/video.m3u8"
|
|
29
|
+
title="影片标题"
|
|
30
|
+
id="ep-01"
|
|
31
|
+
:volume="80"
|
|
32
|
+
:seek-step="10"
|
|
33
|
+
:auto-next="5"
|
|
34
|
+
@ready="onReady"
|
|
35
|
+
@next="() => console.log('next')"
|
|
36
|
+
/>
|
|
37
|
+
</template>
|
|
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
|
+
| ... | | [完整选项见 core 文档](https://www.npmjs.com/package/@sweet-player/core) |
|
|
55
|
+
|
|
56
|
+
## Events
|
|
57
|
+
|
|
58
|
+
| 事件 | 参数 | 说明 |
|
|
59
|
+
|------|------|------|
|
|
60
|
+
| `@ready` | `SweetPlayerCore` | 播放器实例创建完成 |
|
|
61
|
+
| `@prev` | — | 点击上一个 |
|
|
62
|
+
| `@next` | — | 点击下一个 |
|
|
63
|
+
| `@qualityChange` | `QualityLevel` | 画质切换 |
|
|
64
|
+
| `@audioTrackChange` | `AudioTrackInfo` | 音轨切换 |
|
|
65
|
+
|
|
66
|
+
## 实例方法
|
|
67
|
+
|
|
68
|
+
通过 `@ready` 事件获取播放器实例后，可调用所有方法：
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
player.value?.play();
|
|
72
|
+
player.value?.seek(60);
|
|
73
|
+
player.value?.setVolume(50);
|
|
74
|
+
player.value?.toggleFullscreen();
|
|
75
|
+
player.value?.togglePip();
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sweet-player/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Vue 3 component for sweet-player",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"vue3"
|
|
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
|
"vue": "^3.0.0"
|