Openfilm / 胶片、工具、暗房与影像文化

实况照片 - 让你的照片动起来

介绍实况照片（Live Photos）功能，如何在网页上实现 Apple 风格的动态照片效果；1.2 版本起还支持在浏览器里识别安卓动态照片与 iPhone 实况照片原始文件。

你是否曾经羡慕过 iPhone 上的实况照片功能？现在，这种令人惊艳的效果可以在你的网站或博客上实现了！

而且从 1.2 版本开始，组件还能直接识别手机拍出来的原始实况照片文件：安卓的单文件动态照片（Motion Photo）、iPhone 的「图片 + MOV」配对，全部在浏览器里本地解析，不需要上传到服务器。

本文更新于 2026-09-12，新增「识别原始实况照片」章节、更新了安装方式与 API 说明。

📱 什么是实况照片？

实况照片（Live Photos）是 Apple 在 iPhone 6s 上引入的创新功能。当你拍摄一张照片时，iPhone 会同时录制一段 3 秒的高清短视频，记录下拍照前后的瞬间。

实况照片的优势

• 动态瞬间：捕捉静态照片无法记录的动态场景
• 声音记忆：包含当时的环境声音
• 交互体验：用户可以通过简单的手势查看动态效果
• 情感共鸣：让照片更加生动，增强观看体验

🌟 实况照片 Web 组件

现在，你可以使用我们开发的 Live Photo Web Component（live-photo-component），将实况照片功能添加到任何网站！

特性

✨ 零依赖 — 纯原生 JavaScript，无需任何框架 🎬 HTML5 视频 — 使用标准 <video> 标签，兼容性强 🔍 原生识别 — 浏览器内识别安卓单文件 Motion Photo、Apple「图片 + MOV/MP4」配对 📤 开箱即用的上传组件 — <live-photo-uploader> 自带文件选择、状态、错误提示与预览 🔒 本地解析 — 文件不上传服务器，识别与视频提取都在浏览器内完成 🌍 通用兼容 — 支持 WordPress、Astro、React、Vue、纯 HTML 📱 触摸友好 — 移动端长按、桌面端悬停交互 💬 微信兼容 — 微信浏览器内支持点击播放 📳 触觉反馈 — 支持设备振动 📐 自适应比例 — 自动检测照片尺寸 ♿ 无障碍支持 — 键盘导航和屏幕阅读器支持 ⚡ 可选自动播放 — 进入视口时自动播放（需配置） 🎯 LIVE 图标动画 — 播放时图标旋转（类似 Apple Live Photos）

🚀 快速开始

安装

组件有两条 npm 交付轨道，按你的素材来源选一条即可：

安装后在入口文件里引入：

import 'live-photo-component';
import 'live-photo-component/styles.css';

也可以完全不用构建工具，直接用 CDN：

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles.css">
<script src="https://unpkg.com/[email protected]/dist/live-photo.umd.js"></script>

建议锁定版本号：不写版本号（.../live-photo-component/dist/...）会跟随 npm 的 latest 标签，将来发布大版本时网站会被静默升级。国内访问可以把 unpkg.com 换成 cdn.jsdelivr.net/npm，速度更快。

基本用法

<live-photo
  photo="照片.jpg"
  video="视频.mp4">
</live-photo>

完整配置

<live-photo
  photo="照片.jpg"
  video="视频.mp4"
  width="600"
  muted
  autoplay
  radius="12"
  loop>
</live-photo>

🎨 实时演示

示例 1：商店

用手机捕捉到玩偶店发生的美好瞬间。

操作方式：

• 🖥️ 桌面端：将鼠标悬停在 LIVE 徽章上
• 📱 移动端：长按图片查看动态效果

示例 2：校园

日常校园的一个平凡瞬间，因为实况照片而变得生动。

示例 3：拍摄现场（带声音）

麦当劳板板铲铲拍摄现场，开启声音感受来自麦当劳的压迫。

🔍 识别原始的实况照片文件（1.2.x 新增）

上面三个示例用的是「图片 + 视频」两个现成 URL。但多数用户手机里存的是原始文件，形态完全不同：

最省事的方式：一个 HTML 标签

<live-photo-uploader></live-photo-uploader>

它自带文件选择、加载状态、错误提示和预览。下面就是它，可以选自己手机里的照片试试（全程本地解析，文件不会上传）：

安卓通常只需选 一张原始动态照片；iPhone 需要同时选中图片和它对应的 MOV/MP4。

自定义 UI：底层 API

如果你想自己控制选文件、进度和周边设计，可以用底层方法：

<input id="live-input" type="file" multiple
  accept="image/jpeg,image/heic,image/heif,image/avif,video/mp4,video/quicktime,.mov,.heic,.heif,.avif">

<live-photo id="preview" width="720" muted></live-photo>

<script type="module">
  import 'live-photo-component';
  import 'live-photo-component/styles.css';

  const input = document.querySelector('#live-input');
  const preview = document.querySelector('#preview');

  input.addEventListener('change', async () => {
    try {
      const result = await preview.load(input.files);   // 识别并直接预览
      console.log(result.protocol, result.confidence, result.match);
    } catch (error) {
      console.error(error.code, error.message);
    }
  });
</script>

批量识别（不动用预览元素，直接拿到结果列表）：

import LivePhotoElement from 'live-photo-component';

const results = await LivePhotoElement.detectAll(fileInput.files);
for (const result of results) {
  console.log(result.protocol, result.photo, result.video);
}

识别结果的结构：

{
  kind: 'live-photo',
  protocol: 'google-motion-photo', // 也可能是 apple-live-photo、samsung-motion-photo…
  photo: Blob,                     // 封面图
  video: Blob,                     // 动态视频
  confidence: 'high',              // high | medium | low
  match: 'embedded-video',         // content-identifier | filename | only-pair
  contentIdentifier: '...',
  sourceFiles: [File]
}

识别能力边界（重要）

另外要清楚：识别不等于转码。原始 Apple HEIC 与 HEVC/MOV 在 Windows 或安卓的 Chrome 里可能无法解码。如果面向所有浏览器发布预览，建议服务端保留原图的同时，另生成一份 JPEG/WebP 封面和 H.264 MP4 播放副本。

🧩 JavaScript API 与事件

const lp = document.querySelector('live-photo');

lp.play();            // 播放
lp.pause();           // 暂停
lp.isPlaying();       // 是否正在播放
await lp.load(files); // 识别原始文件并预览（1.2.x）

live-photo:error 的 detail.code 会告诉你具体原因，例如 LIVE_PHOTO_NOT_DETECTED、PLAYBACK_FAILED、VIDEO_LOAD_FAILED：

lp.addEventListener('live-photo:error', ({ detail }) => {
  console.error(detail.code, detail.error);
});

🔧 配置选项

💡 最佳实践

1. 图片和视频比例一致

确保封面图和视频的宽高比相同，这样可以实现平滑的过渡效果。

2. 视频不要太长

Live Photo 通常是 1-3 秒，过长的视频会影响用户体验和加载速度。

3. 压缩视频

使用 MP4 (H.264) 格式，可以显著减小文件体积，提升加载速度。用户手机里的 HEIC/HEVC 原始文件虽然能识别，但不适合直接当作网页播放源。

4. 使用 HTTPS

确保图片和视频都使用 HTTPS 协议，避免混合内容问题。

5. 提供备用方案

组件会在视频加载失败时显示封面图，确保用户始终能看到内容；配合 live-photo:error 事件还能给用户更明确的提示。

🎯 LIVE 图标动画

实况照片的核心特色之一是 LIVE 图标动画：

• 图标旋转：播放时，LIVE 图标会每 5 秒旋转 360°
• 平滑过渡：视频淡入的同时，封面图淡出
• 视觉反馈：清晰指示实况照片正在播放

这个动画效果与 Apple 的 Live Photos 完全一致，为用户提供熟悉的交互体验。

🌐 浏览器兼容性

📚 相关资源

• npm 包：live-photo-component
• GitHub 仓库：Feirobot/live-photo-component
• 更新日志：CHANGELOG
• 发布流程：RELEASING

🎉 结语

实况照片让你的网站更加生动有趣。无论是展示旅行照片、记录生活瞬间，还是创作艺术摄影，Live Photo 都能为你的作品增添独特的魅力。

如果你的用户直接从手机上传原图，1.2 版本还能替你把「实况」从原始文件里还原出来——这大概是网页端最接近 iPhone 原生体验的做法了。

立即开始使用，让你的照片”活”起来吧！

🌐 Language / 语言

English Version | 中文版

如果你有任何问题或建议，欢迎在 GitHub 上提出 Issue！

想在自己的网站上使用？获取实况照片组件与 WordPress 插件。

想在自己的网站发布实况照片？请读网站指南。