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

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

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

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

演示实况照片：

TIP

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

实况照片插入代码：

1

![](1.avif)

实际效果：

实况

桂花 (图片是原来的，视频我压缩过。)

关于权限

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

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。

权限的主动检测

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

1

navigator.getAutoplayPolicy('mediaelement')

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

视频格式

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

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

如何从 iPhone 导出实况照片

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

通过隔空投送到 MacOS 电脑💻

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

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

“导出未修改的原片”

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

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

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

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

“存储到‘文件’”

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

“存储为视频”

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

Live Photo 文件夹的结构

待续。

格式转换

  1. NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. video.play() ^

  2. 测试代码验证后被独立成 Markdown 插件了：renderers/live_photo。 ^

  3. Autoplay guide for media and Web Audio APIs ^

陪她去流浪 碎碎念 桃子
文章评论 11 发表评论
  1. eyu https://www.1piece.cc

    从hsuyeung过来的，感觉你这个方案不错！学习学习

    回复 编辑 删除
    1. 桃子

      我还是挺佩服作者当时的探索精神，条条框框的要求换作是我早就放弃了。🥵

      回复 编辑 删除
      1. eyu https://www.1piece.cc

        是的，当时看了：哎呦这效果真不错！有官方库实现，就是还得折腾大小、格式有点麻烦。

        回复 编辑 删除
    2. 李欲裕

      请问有教程嘛？小白完全不知道怎么操作

      回复 编辑 删除
      1. 桃子

        所有代码我放到一个独立的文件中了，打开即可：standalone.html。

        回复 编辑 删除
      2. 狗

        找时间偷了

        回复 编辑 删除
        1. 桃子

          手机端就差个方便的上传工具了，虽然也只有少量代码。

          但是一想到苹果开发者账号 $99/年，只能作罢。（免费的听说可以自己用，但是每7天要重新编译、安装🤢。）

          回复 编辑 删除
          1. Z大大

            我们有个闲置的企业号~ 可以免费提供😄

            回复 编辑 删除
            1. 桃子

              虽然很想要，但还是忍住了。🥹

              回复 编辑 删除
              1. Z大大

                你用了我就不会感觉到被苹果白嫖了😊，有没有LIVE图在微信小程序中的存储展示下载思路呀😯目前好像主流的OSS都不支持

                回复 编辑 删除
                1. 桃子

                  把上面评论独立出来的页面偷走放到自己的小程序就可以了，我不会小程序开发。但是 js 和 css 应该能用吧？能用就没问题。不过就是一张图片、一条视频叠起来播放一下就行了。

                  回复 编辑 删除
        还没有用户发表过评论，我要发表评论。
        ×
        编辑评论
        实况