如何把实况照片放到网站上（iPhone 与安卓）
实况照片在网页上不会自动生效。本文讲清如何导出图片+视频对、用零依赖 Web Component 嵌入，并保持页面性能。
实况照片在网页上并不是一个文件。苹果把它存成”静态图 + 短视频”，安卓厂商则把两者打包进单个 Motion Photo 文件。所以直接把它拖进网页，通常只剩下一张静态图，严重时还会出现破损的媒体元素。
本文给出可落地的路径：从手机里导出这对文件，让它能播放，并兼顾性能。
1. 导出图片与视频
iPhone：在”照片”中打开实况照片，点分享，选择导出原始文件（不同 iOS 版本可能是”复制为静态照片”加单独视频，或”存储到文件”）。你需要两个文件：一张静态图（HEIC/JPEG）和一段几秒的 MOV/MP4。
安卓：Google 相册与多数厂商相册可以把动态照片导出为 JPEG + MP4。如果相册只提供单个动态照片文件，浏览器组件可以直接识别（见下）。
2. 用 Web Component 嵌入
最省事的方式是用一个零依赖组件渲染这对文件并处理播放：
<live-photo photo=“/images/cover.jpg” video=“/videos/clip.mp4” width=“600px” muted=“true”></live-photo>
用 npm 安装或用 CDN 引入：
npm install live-photo-component
然后在页面上注册一次即可。移动端长按播放，桌面端在支持时悬停播放。组件还能识别用户上传的原始安卓动态照片与苹果双文件。
3. WordPress
如果你用 WordPress，同一引擎已封装为古腾堡区块：安装插件，添加”Live Photos”区块，从媒体库选择封面图与视频。下载见组件与插件页。
4. 保持性能
- 只预加载静态图；视频懒加载或在交互时再加载。
- 片段尽量短，2–4 秒足够。
- 转码为 H.264 MP4 以获得最广兼容。
- 始终设置 poster，避免布局偏移。
为什么不用 video 标签？
可以用，但普通 video 标签无法区分静态图、动态照片与真正的视频，而且会立即下载视频。专用元素默认显示静态图，只在用户交互时才付出视频的代价。