Skip to content

Commit ddc62ed

Browse files
IceyWuIceyWu
committed
feat: 添加 LivePhoto 组件及其文档，支持视频和图片的长按播放功能
1 parent d08df1b commit ddc62ed

File tree

13 files changed

+1053
-0
lines changed

13 files changed

+1053
-0
lines changed

‎docs/component/livephoto.md‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# LivePhoto 实况照片
2+
3+
基于 video 和 image 实现的实况照片组件，支持长按播放视频、自定义样式、事件监听等功能。用户可以通过长按图片来播放对应的视频内容，模拟 iOS Live Photo 的效果。
4+
5+
## 基本用法
6+
7+
基础用法需要提供视频源和静态图片源。
8+
9+
```vue
10+
<up-live-photo
11+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
12+
image-src="https://picsum.photos/400/300?random=1"
13+
width="300"
14+
height="200"
15+
radius="12"
16+
/>
17+
```
18+
19+
## 自定义圆角
20+
21+
通过 `radius` 属性设置自定义圆角大小。
22+
23+
```vue
24+
<up-live-photo
25+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
26+
image-src="https://picsum.photos/400/300?random=1"
27+
width="300"
28+
height="200"
29+
:radius="20"
30+
/>
31+
```
32+
33+
## 不同尺寸
34+
35+
支持设置不同的宽度和高度。
36+
37+
```vue
38+
<!-- 小尺寸 -->
39+
<up-live-photo
40+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
41+
image-src="https://picsum.photos/400/300?random=1"
42+
width="120"
43+
height="80"
44+
radius="8"
45+
/>
46+
47+
<!-- 中尺寸 -->
48+
<up-live-photo
49+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
50+
image-src="https://picsum.photos/400/300?random=1"
51+
width="180"
52+
height="120"
53+
radius="12"
54+
/>
55+
56+
<!-- 大尺寸 -->
57+
<up-live-photo
58+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
59+
image-src="https://picsum.photos/400/300?random=1"
60+
width="240"
61+
height="160"
62+
radius="16"
63+
/>
64+
```
65+
66+
## 自定义提示文本
67+
68+
通过 `hint-text` 属性设置自定义的长按提示文本。
69+
70+
```vue
71+
<up-live-photo
72+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
73+
image-src="https://picsum.photos/400/300?random=1"
74+
width="300"
75+
height="200"
76+
radius="12"
77+
hint-text="按住播放动态效果"
78+
/>
79+
```
80+
81+
## 隐藏指示器和提示
82+
83+
通过 `show-indicator` 和 `show-hint` 属性控制指示器和提示的显示。
84+
85+
```vue
86+
<up-live-photo
87+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
88+
image-src="https://picsum.photos/400/300?random=1"
89+
width="300"
90+
height="200"
91+
radius="12"
92+
:show-indicator="false"
93+
:show-hint="false"
94+
/>
95+
```
96+
97+
## 事件监听
98+
99+
支持监听长按开始/结束、视频播放/暂停等事件。
100+
101+
```vue
102+
<up-live-photo
103+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
104+
image-src="https://picsum.photos/400/300?random=1"
105+
width="300"
106+
height="200"
107+
radius="12"
108+
@press-start="onPressStart"
109+
@press-end="onPressEnd"
110+
@video-play="onVideoPlay"
111+
@video-pause="onVideoPause"
112+
/>
113+
```
114+
115+
## 组件方法
116+
117+
可以通过组件实例调用相关方法。
118+
119+
```vue
120+
<template>
121+
<up-live-photo
122+
ref="livePhotoRef"
123+
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
124+
image-src="https://picsum.photos/400/300?random=1"
125+
width="300"
126+
height="200"
127+
radius="12"
128+
/>
129+
<button @click="stopVideo">停止播放</button>
130+
<button @click="checkIsPlaying">检查播放状态</button>
131+
<button @click="resetComponent">重置组件</button>
132+
</template>
133+
134+
<script setup>
135+
import { ref } from 'vue'
136+
137+
const livePhotoRef = ref()
138+
139+
function stopVideo() {
140+
livePhotoRef.value.stopVideo()
141+
}
142+
143+
function checkIsPlaying() {
144+
const isPlaying = livePhotoRef.value.isPlaying()
145+
console.log('播放状态:', isPlaying)
146+
}
147+
148+
function resetComponent() {
149+
livePhotoRef.value.reset()
150+
}
151+
</script>
152+
```
153+
154+
## Props
155+
156+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
157+
|-------------------|--------------------------|-------------------|------------------|--------|
158+
| video-src | 视频源地址 | string | - | - |
159+
| image-src | 静态图片源地址 | string | - | - |
160+
| width | 组件宽度 | number \| string | '100%' | - |
161+
| height | 组件高度 | number \| string | '100%' | - |
162+
| radius | 圆角大小 | number \| string | 0 | - |
163+
| custom-style | 自定义样式 | string | '' | - |
164+
| custom-class | 自定义类名 | string | '' | - |
165+
| mode | 图片填充模式 | string | 'aspectFill' | - |
166+
| show-indicator | 是否显示Live Photo指示器 | boolean | true | - |
167+
| show-hint | 是否显示长按提示 | boolean | true | - |
168+
| hint-text | 提示文本 | string | '长按查看实况' | - |
169+
| enable-vibration | 是否启用振动反馈 | boolean | true | - |
170+
| muted | 是否静音播放 | boolean | true | - |
171+
172+
## Events
173+
174+
| 事件名 | 说明 | 回调参数 |
175+
|-------------|----------------|----------|
176+
| video-play | 视频开始播放 | - |
177+
| video-pause | 视频暂停播放 | - |
178+
| press-start | 开始长按 | - |
179+
| press-end | 结束长按 | - |
180+
| video-ended | 视频播放结束 | - |
181+
| image-load | 图片加载成功 | - |
182+
| image-error | 图片加载失败 | - |
183+
184+
## Methods
185+
186+
| 方法名 | 说明 | 参数 | 返回值 |
187+
|------------|----------------|------|---------|
188+
| stopVideo | 停止视频播放 | - | - |
189+
| isPlaying | 是否正在播放 | - | boolean |
190+
| reset | 重置组件状态 | - | - |
191+
192+
## 注意事项
193+
194+
1. 组件需要同时提供 `video-src` 和 `image-src` 属性
195+
2. 视频建议使用较短的循环视频，以获得更好的 Live Photo 效果
196+
3. 在小程序平台，视频播放可能受到平台限制
197+
4. 建议为视频和图片提供相同的宽高比，以保证显示效果
198+
5. 组件支持振动反馈，但在某些平台可能不可用

‎src/locale/en-US.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@
169169
"button-an-niu": "Button",
170170
"button-title": "Button",
171171
"waterfall": "Waterfall",
172+
"livephoto": "LivePhoto",
172173
"cai-dan-dan-chu-fang-xiang": "Menu pop-up direction",
173174
"cai-jian-hou-shang-chuan": "Crop and upload",
174175
"calendar-ri-li-xuan-ze-qi": "Calendar",

‎src/locale/zh-CN.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@
169169
"button-an-niu": "Button 按钮",
170170
"button-title": "Button 按钮",
171171
"waterfall": "Waterfall 瀑布流",
172+
"livephoto": "LivePhoto 实况照片",
172173
"cai-dan-dan-chu-fang-xiang": "菜单弹出方向",
173174
"cai-jian-hou-shang-chuan": "裁剪后上传",
174175
"calendar-ri-li-xuan-ze-qi": "Calendar 日历选择器",

‎src/pages.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,21 @@
124124
"navigationBarTitleText": "%waterfall%"
125125
// #endif
126126
}
127+
},
128+
{
129+
"path": "livephoto/Index",
130+
"name": "livephoto",
131+
"style": {
132+
"mp-alipay": {
133+
"allowsBounceVertical": "NO"
134+
},
135+
// #ifdef MP
136+
"navigationBarTitleText": "LivePhoto 实况照片",
137+
// #endif
138+
// #ifndef MP
139+
"navigationBarTitleText": "%livephoto%"
140+
// #endif
141+
}
127142
}
128143
]
129144
}

‎src/pages/index/Index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ const list = computed(() => [
8989
{
9090
id: 'waterfall',
9191
name: t('waterfall')
92+
},
93+
{
94+
id: 'livephoto',
95+
name: t('livephoto')
9296
}
9397
]
9498
}

0 commit comments

Comments
 (0)