@thun888/live-photo 1.0.0 → 1.0.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.en.md +118 -0
- package/README.md +114 -3
- package/dist/main.css +1 -1
- package/package.json +2 -2
package/README.en.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# LivePhoto
|
|
2
|
+
|
|
3
|
+
A JavaScript library for parsing and displaying Live Photos on the web. It supports both Android Motion Photos and Apple Live Photos.
|
|
4
|
+
|
|
5
|
+
[English](/README.en.md) | [中文](/README.md)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Multi-format Support**:
|
|
12
|
+
- Android Motion Photos
|
|
13
|
+
- Apple Live Photos (.livp)
|
|
14
|
+
- Combined static image + video pairs
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
Install via npm:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @thun888/live-photo
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Quick Start
|
|
27
|
+
|
|
28
|
+
### 1. Import Resources
|
|
29
|
+
|
|
30
|
+
You can import via npm or use the pre-built files directly.
|
|
31
|
+
|
|
32
|
+
**ES Module:**
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { init } from '@thun888/live-photo';
|
|
36
|
+
import '@thun888/live-photo/dist/main.css'; // Import styles
|
|
37
|
+
|
|
38
|
+
// Initialize
|
|
39
|
+
init('.livephoto-item');
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Browser (Script Tag):**
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<link rel="stylesheet" href="path/to/dist/main.css">
|
|
46
|
+
<script src="path/to/dist/bundle.js"></script>
|
|
47
|
+
|
|
48
|
+
<script>
|
|
49
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
50
|
+
LivePhoto.init('.livephoto-item');
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 2. HTML Structure
|
|
56
|
+
|
|
57
|
+
Create a container with a specific class (e.g., `livephoto-item`) and configure the image and options via `data-*` attributes.
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div
|
|
61
|
+
class="livephoto-item"
|
|
62
|
+
data-image="./path/to/motion-photo.jpg"
|
|
63
|
+
data-alt="Android Motion Photo"
|
|
64
|
+
></div>
|
|
65
|
+
|
|
66
|
+
<div
|
|
67
|
+
class="livephoto-item"
|
|
68
|
+
data-image="./path/to/apple-live-photo.livp"
|
|
69
|
+
data-alt="Apple Live Photo"
|
|
70
|
+
></div>
|
|
71
|
+
|
|
72
|
+
<div
|
|
73
|
+
class="livephoto-item"
|
|
74
|
+
data-image="./image.jpg"
|
|
75
|
+
data-video="./video.mp4"
|
|
76
|
+
data-width="400"
|
|
77
|
+
data-height="300"
|
|
78
|
+
></div>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Configuration (Data Attributes)
|
|
82
|
+
|
|
83
|
+
All configurations are set via the `data-*` attributes of the HTML element:
|
|
84
|
+
|
|
85
|
+
| Attribute | Required | Description | Example |
|
|
86
|
+
| --- | --- | --- | --- |
|
|
87
|
+
| `data-image` | **Yes** | URL of the image file. Videos will be parsed from this for Live Photos. | `data-image="photo.jpg"` |
|
|
88
|
+
| `data-video` | No | URL of the video file. If provided, manual parsing is skipped. | `data-video="video.mp4"` |
|
|
89
|
+
| `data-width` | No | Container width. Defaults to automatic image dimensions if unset. | `data-width="300"` |
|
|
90
|
+
| `data-height` | No | Container height. | `data-height="400"` |
|
|
91
|
+
| `data-type` | No | Force a parsing type (`android` or `apple`). Auto-detected by default. | `data-type="apple"` |
|
|
92
|
+
| `data-muted` | No | Whether to play muted. Defaults to `true`. | `data-muted="true"` |
|
|
93
|
+
| `data-alt` | No | Alternative text for the image. | `data-alt="Example Image"` |
|
|
94
|
+
|
|
95
|
+
## Development
|
|
96
|
+
|
|
97
|
+
1. **Install Dependencies**
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
npm install
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
2. **Build**
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm run build
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Acknowledgments
|
|
111
|
+
|
|
112
|
+
1. [测试不基于 LivePhotoKit JS 实现实况照片 - 陪她去流浪](https://blog.twofei.com/1603/)
|
|
113
|
+
2. [解析Android的动态照片 - 星外之神的博客 | wszqkzqk Blog](https://wszqkzqk.github.io/2024/08/01/解析Android的动态照片/)
|
|
114
|
+
3. [wszqkzqk/live-photo-conv: Live Photo Converter is a cross-platform tool to process live photos (or motion photos)](https://github.com/wszqkzqk/live-photo-conv)
|
|
115
|
+
|
|
116
|
+
## License
|
|
117
|
+
|
|
118
|
+
MIT
|
package/README.md
CHANGED
|
@@ -1,6 +1,117 @@
|
|
|
1
|
-
|
|
1
|
+
# LivePhoto
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
一个用于在 Web 端解析和展示实况图片（Live Photos）的 JavaScript 库。支持 Android 动态照片和 Apple Live Photos。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[English](/README.en.md) | [中文](/README.md)
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## 特性
|
|
10
|
+
|
|
11
|
+
- **多格式支持**：
|
|
12
|
+
- 支持 Android 动态照片 (Motion Photos)
|
|
13
|
+
- 支持 Apple Live Photos (.livp)
|
|
14
|
+
- 普通视频+图片组合
|
|
15
|
+
|
|
16
|
+
## 安装
|
|
17
|
+
|
|
18
|
+
使用 npm 安装：
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @thun888/live-photo
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 快速开始
|
|
25
|
+
|
|
26
|
+
### 1. 引入资源
|
|
27
|
+
|
|
28
|
+
你可以通过 npm 引入，或者直接使用构建后的文件。
|
|
29
|
+
|
|
30
|
+
**ES Module:**
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
import { init } from '@thun888/live-photo';
|
|
34
|
+
import '@thun888/live-photo/dist/main.css'; // 引入样式
|
|
35
|
+
|
|
36
|
+
// 初始化
|
|
37
|
+
init('.livephoto-item');
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Browser (Script Tag):**
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<link rel="stylesheet" href="path/to/dist/main.css">
|
|
44
|
+
<script src="path/to/dist/bundle.js"></script>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
48
|
+
LivePhoto.init('.livephoto-item');
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. HTML 结构
|
|
54
|
+
|
|
55
|
+
创建带有特定类名（如 `livephoto-item`）的容器，并通过 `data-*` 属性配置图片和选项。
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<!-- 方式一：自动解析 (推荐) -->
|
|
59
|
+
<!-- 只需提供图片地址，库会自动尝试从图片中解析视频 -->
|
|
60
|
+
<div
|
|
61
|
+
class="livephoto-item"
|
|
62
|
+
data-image="./path/to/motion-photo.jpg"
|
|
63
|
+
data-alt="Android 动态照片"
|
|
64
|
+
></div>
|
|
65
|
+
|
|
66
|
+
<div
|
|
67
|
+
class="livephoto-item"
|
|
68
|
+
data-image="./path/to/apple-live-photo.livp"
|
|
69
|
+
data-alt="Apple Live Photo"
|
|
70
|
+
></div>
|
|
71
|
+
|
|
72
|
+
<!-- 方式二：手动指定视频 -->
|
|
73
|
+
<!-- 如果你有独立的视频文件 -->
|
|
74
|
+
<div
|
|
75
|
+
class="livephoto-item"
|
|
76
|
+
data-image="./image.jpg"
|
|
77
|
+
data-video="./video.mp4"
|
|
78
|
+
data-width="400"
|
|
79
|
+
data-height="300"
|
|
80
|
+
></div>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## 配置项 (Data Attributes)
|
|
84
|
+
|
|
85
|
+
所有配置均通过 HTML 元素的 `data-*` 属性进行设置：
|
|
86
|
+
|
|
87
|
+
| 属性 | 必填 | 描述 | 示例 |
|
|
88
|
+
|------|------|------|------|
|
|
89
|
+
| `data-image` | **是** | 图片文件的 URL。如果是实况图，将从中解析视频。 | `data-image="photo.jpg"` |
|
|
90
|
+
| `data-video` | 否 | 视频文件的 URL。如果提供，将跳过解析直接使用。 | `data-video="video.mp4"` |
|
|
91
|
+
| `data-width` | 否 | 容器宽度。如果不设置，将尝试自动获取图片尺寸。 | `data-width="300"` |
|
|
92
|
+
| `data-height` | 否 | 容器高度。 | `data-height="400"` |
|
|
93
|
+
| `data-type` | 否 | 强制指定解析类型 (`android` 或 `apple`)。默认自动检测。 | `data-type="apple"` |
|
|
94
|
+
| `data-muted` | 否 | 是否静音播放。如果不填，默认静音。 | `data-muted="true"` |
|
|
95
|
+
| `data-alt` | 否 | 图片的 alt 描述文本。 | `data-alt="示例图片"` |
|
|
96
|
+
|
|
97
|
+
## 开发
|
|
98
|
+
|
|
99
|
+
1. **安装依赖**
|
|
100
|
+
```bash
|
|
101
|
+
npm install
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
2. **构建**
|
|
105
|
+
```bash
|
|
106
|
+
npm run build
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## 鸣谢
|
|
110
|
+
|
|
111
|
+
1. [测试不基于 LivePhotoKit JS 实现实况照片 - 陪她去流浪](https://blog.twofei.com/1603/)
|
|
112
|
+
2. [解析Android的动态照片 - 星外之神的博客 | wszqkzqk Blog](https://wszqkzqk.github.io/2024/08/01/解析Android的动态照片/)
|
|
113
|
+
3. [wszqkzqk/live-photo-conv: Live Photo Converter is a cross-platform tool to process live photos (or motion photos)](https://github.com/wszqkzqk/live-photo-conv)
|
|
114
|
+
|
|
115
|
+
## 许可证
|
|
116
|
+
|
|
117
|
+
MIT
|
package/dist/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.live-photo{border-radius:var(--border-radius,8px);container-type:inline-size;height:auto!important;
|
|
1
|
+
.live-photo{border-radius:var(--border-radius,8px);container-type:inline-size;display:inline-block;height:auto!important;max-width:100%;overflow:hidden;position:relative}.live-photo .container{height:100%;position:absolute;width:100%}.live-photo .container img,.live-photo .container video{height:100%;object-fit:cover;position:absolute;width:100%}.live-photo .container img{transition:opacity 1s ease,transform 1s ease}.live-photo .container video{transition:transform 1s ease}.live-photo.zoom .container img,.live-photo.zoom .container video{transform:scale(1.1)}.live-photo.zoom .container img{opacity:0}.live-photo.zoom .icon img{animation:spin 5s linear infinite}.live-photo .controls{align-items:center;column-gap:6px;display:inline-flex;left:10px;position:relative;top:10px}.live-photo .icon{align-items:center;background-color:rgba(240,255,255,.67);border-radius:var(--border-radius,8px);cursor:pointer;display:inline-flex;height:20px;padding:2px;user-select:none}.live-photo .icon img{height:22px;width:22px}.live-photo .icon span{color:#606060;font-size:80%;padding:3px}@container (max-width: 200px){.live-photo .icon span{display:none}}.live-photo .warning{background-color:rgba(240,255,255,.67);border-radius:var(--border-radius,8px);color:#9a6700;display:none;left:0;margin:10px;opacity:0;padding:4px 6px;position:absolute;top:40px;transition:opacity .5s linear}.live-photo .warning.show{display:inline-block!important;opacity:1!important}.live-photo .volume-control{align-items:center;background-color:rgba(240,255,255,.67);border-radius:var(--border-radius,8px);cursor:pointer;display:inline-flex;height:20px;justify-content:center;padding:2px;transition:background-color .2s ease;user-select:none;width:20px}.live-photo .volume-control:hover{background-color:rgba(240,255,255,.9)}.live-photo .volume-control .volume-icon{height:18px;width:18px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thun888/live-photo",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"main": "dist/bundle.js",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
7
7
|
],
|
|
8
8
|
"scripts": {
|
|
9
|
-
"build": "webpack",
|
|
9
|
+
"build": "npx webpack",
|
|
10
10
|
"prepublishOnly": "npm run build"
|
|
11
11
|
},
|
|
12
12
|
"license": "MIT",
|