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

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

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

演示实况照片：

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 名不虚传）。