苹果的实况照片（Live Photos）功能能够捕捉照片前后各 1.5 秒的视频，为静态图片赋予生动感。而如果你想在 WordPress 博客中也展示这样的视觉效果，现在可以通过 Live Photos Block 插件 来轻松实现。
这个插件实现简单，加载轻巧，效果还算不错，适合用于图片故事类博客或日常记录。我在果果日记博客的测试中，体验总体良好。不过，它仍有一定优化空间，比如可进一步避免脚本重复加载，并让脚本仅在区块真正启用时才加载，等等。当然，这些都可以通过简单修改代码来实现，可以自己动手优化一下。
1. WordPress-LivePhotos 插件简介
Live Photos Block 插件是由博友 万事屋日记 编写并开源的 Gutenberg 区块扩展，允许用户在编辑器中插入一个自定义区块，以模拟苹果实况照片的播放效果。
你可以在区块中上传任意一张图片（如 JPG、PNG）和一个短视频（如 MOV、MP4），插件会自动构造一个前端播放器，让这对照片+视频组合表现出如 Live Photo 般的效果。
插件引用了 Apple 官方的 JS，前台效果可以说一毛一样。但它并不需要照片和视频具备特定格式、长度或编码要求——只要浏览器支持，插件都能正常工作。
2. 实况照片格式简介
苹果的实况照片（Live Photo）是一种结合静态图像与短视频的多媒体形式，旨在捕捉按下快门前后的动态场景。它最初于 iPhone 6s 时代推出，当前许多安卓手机厂商也有类似功能，例如“动态照片”“动图模式”“超级照片”等，使这种表现方式逐渐成为照片分享中受欢迎的一种趋势。
在苹果设备中，每一张实况照片实际上包含三个部分：一张高质量的静态图像（通常是 .heic 格式）、一段时长约 3 秒的短视频（.mov 格式），以及一个包含同步和拍摄参数的元数据文件（.plist）。当用户从 Mac 或通过 AirDrop 拷贝一张 Live Photo 到电脑时，可以看到这些内容封装在一个 .pvt 文件夹中。
然而，如果通过微信或 QQ 等聊天工具分享照片，为了兼容和节省流量，这些 app 通常会将照片压缩为 .jpeg 格式，并剥离掉动态信息。因此，即便原图是 Live Photo，发送后也只保留为静态图像。
本插件模拟的 Live Photo 效果，并不依赖上述文件格式的严格结构。你可以自由上传任意一张图片和一个短视频——无论是否来自 iPhone，只要浏览器支持，它都可以在网页上模拟实况照片的动态播放效果。这个特性大大提高了插件的实用性和兼容性。
3. 实现原理与技术方案
插件基于 Apple 官方提供的 LivePhotosKit.js 播放器脚本，将上传的图片与视频组合为一个前端播放器，模仿真实 Live Photo 的播放方式。
- 区块在渲染时会输出一个
data-live-photo容器； - 前端脚本会监听 DOM 并初始化
LivePhotosKit.Player； - 播放器将自动在支持的浏览器中渲染并播放 Live Photo 效果。
这个方案不依赖服务器端编码，也不需要特定的视频格式，因此兼容性较好，部署也非常轻松。
4. 插件安装与使用方法
4.1 安装插件
- 从 GitHub 项目页面 下载插件；
- 可通过 WordPress 后台“插件 → 安装插件 → 上传插件”方式安装，或解压后通过 FTP 上传至
wp-content/plugins目录。（本插件尚未上架至 WordPress 官方插件库） - 后台启用插件。
4.2 插入实况照片区块
- 在 Gutenberg 编辑器中点击添加区块；
- 选择媒体目录下的 Live Photos Block 区块；
- 按照阴道上传图片和视频；
- 设置展示宽度（支持鼠标拖拽调整，目前不支持手动输入数值）。
4.3 实际测试体验
我在果果日记中实测了该插件，整体使用流畅，加载速度快，在桌面端和手机上都表现稳定，兼容性良好。不过在开发者角度，以下几个方面仍可进一步优化：
- 脚本重复加载：LivePhotosKit.js 在编辑器和前端可能被加载两次；
- 无条件加载脚本：即便页面没有调用该区块，也会加载播放器脚本；
- 宽度设置限制：仅能通过拖拽方式调整宽度，缺乏手动输入功能。
这些问题都不难解决，稍加修改插件即可达到更理想的使用体验。当然同时也希望作者能进一步优化，😄😄😄
5. 推荐阅读与资源链接
- 插件源码与安装说明：GitHub - WordPress-LivePhotos
- 作者博客介绍页：https://rjjr.cn/976.html
- Apple 官方文档：LivePhotosKit JS
赌王从小开始培养了。
苹果那个实况效果不错。