测试不基于 LivePhotoKit JS 实现实况照片

看了《网站支持 Live Photo 图片展示》这篇文章后，感觉使用成本极高，毫不犹豫直接放弃使用苹果官方的 LivePhotoKit JS 库（此库已经 8 年没有再更新过了）。转而自己使用最朴素的网页三要素实现了一个看起来还不错的版本。

相对于上述文章的要求，特别说明：

1. 完全不基于 苹果官方的 LivePhotoKit JS 版本；
2. 对照片格式、大小、编码没有任何要求，浏览器支持即可；
3. 对视频格式、大小、编码没有任何要求，浏览器支持即可；
4. 支持声音（浏览器可能会要求自动播放权限，注意地址栏）¹；
5. 源代码全部在页面中，样式+脚本不足💯行²，见评论；
6. 完全无感使用：自动把具有同名视频的图片渲染成 LivePhoto；
7. 不会出现播放几次后无法再播放的问题（即便有，可以修复）。

演示实况照片：

TIP

1. 如果是电脑上，鼠标放在左上角图标上。会有加载时间，多等一下。
2. 如果是手机上，长按图片即可，无需按左上角。同样有加载时间。

实况照片插入代码：

实际效果：

关于权限

根据官方文档的说法³，浏览器默认会禁止自动播放音频（或带音频轨道的视频）：

Autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be audible, and autoplay blocking applies to them. Inaudible media are not affected by autoplay blocking.

所以，为了提高播放成功率，有以下两个做法：

1. 可以考虑转换编码的时候移除视频的音轨。这样还可以减小文件的体积。
2. 把 <video> 静音掉：<video muted>。

当然，我觉得声音是记录生活不可缺少的一部分，我会将其保留。

另外，判断“是否可以自动播放”的条件不止是上述两条，请参考：Autoplay availability。

权限的主动检测

可以主动检测、但不可以主动申请是否有自动播放的权限：

也可以尝试 play() 会不会抛异常。参考上述文档。

视频格式

常用的 x264/mp4 就很不错，兼容性很好。

压缩度更高、文件更小得多的 av1/webm Safari 浏览器不支持。如果不考虑支持可以忽略（新时代的 IE 名不虚传）。

如何从 iPhone 导出实况照片

以下几种方式都比较手动，还不太优雅。如果我有苹果开发者帐号，我会开发一款导出实况照片的 App。

通过隔空投送到 MacOS 电脑💻

1. 选中实况照片并点击“分享⬆️”；
2. 在顶部🔝的“选项”中打开“所有照片数据”；
3. 投送到 MacOS。

这种方式会包含此照片的所有数据，包含但不限于：原始的图片和视频、编辑过的图片和视频、第三方工具编辑过的图片和视频，以及一些元数据文件。

“导出未修改的原片”

1. 选中实况照片并点击“分享⬆️”；
2. 在下面⬇️的菜单选项中打开“导出未修改的原片”；
3. 保存到“文件 App”中。

确实如菜单所言，导出结果是原片，而不是编辑版本。

这里不要误会“编辑”的含义：如果在照片时拍摄大小改为“正方形”，则“正方形”照片是编辑过的版本。因为相机拍出来的原始图片不是正方形的。

所以如果你在相册里面看到一张正方形的照片，导出后可能不是正方形的。

“存储到‘文件’”

这个不能用，存储的只是照片，不包含对应的视频。

“存储为视频”

实况照片是可以重新调整封面帧的，导出为视频无法再调整。清晰度可能降低、加载速度也会更慢。

Live Photo 文件夹的结构

待续。

格式转换