夜庭記

LivePhoto

折腾2025/01/27594 字约 1 分钟

前言

自从微信支持在朋友圈发布Live图之后便想着在网站上实现Live图播放的功能，实际上已经有很多在网页上插入Live图的教程，包括Apple也出了支持文档。但都是需要div标签，想要插入Live图非常麻烦，在写文章时也显得凌乱。我也看到有博主实现了利用Markdown自定义语法插入Live图，但貌似说明有图片以及视频宽高限制，而利用div标签（我用下来）没有宽高大小限制，既然我用的是Typecho，自然是制作一个快速插入Live图的插件.那如何实现快速插入？自然就是利用短代码啦。得益于Artificial Intelligence的快速迭代，作为PHP零基础的我也能制作一个简单的符合我需求的插件。本插件的制作得益于Cursor和Claude3.5以及Chatgpto1的支持。

GitHubMusenxi/LivePhotos-for-TypechoA Typecho plugin that enables users to easily insert Apple Live Photos and Android Motion Photos.JavaScript · ★ 14

<cite>点个Star支持一下吧</cite>

功能

启用插件后，会自动引入livephotoskitjs，在编辑文章页面功能栏末尾加入Live标识。

功能栏

点击Live标识后，即可在弹出的文本框中输入Live图对应的JPG（JPEG）和MOV文件的链接地址。

文本框

这里的宽高比由于iPhone通常默认拍摄4:3的照片故设置默认为4:3，如果你的照片是其他比例的如1:1，16:9，则在宽高比那一栏以X/Y的形式输入，需要注意的是，X/Y一般都大于1。

短代码

这就是插入短代码之后的效果，宽高比不填则是第一行的形式，若填了宽高比则为第二行这般形式。

##效果默认4/3

[LivePhoto photo="https://musenxi.com/usr/uploads/IMG_2856.JPEG" video="https://musenxi.com/usr/uploads/IMG_2856.MOV"]

自行设定2/1

[LivePhoto photo="https://musenxi.com/usr/uploads/IMG_2856.JPEG" video="https://musenxi.com/usr/uploads/IMG_2856.MOV" ratio="2/1"]

我们也可以突破常规3秒的限制，我也截了一段5秒的4K视频做了一个。默认4/3

[LivePhoto photo="https://musenxi.com/usr/uploads/P1000009_70.jpg" video="https://musenxi.com/usr/uploads/P1000009_7.mov"]

自行设定2/1

[LivePhoto photo="https://musenxi.com/usr/uploads/P1000009_70.jpg" video="https://musenxi.com/usr/uploads/P1000009_7.mov" ratio="2/1"]

需要注意的

1.如果你的主题也用了PJAX，则需要在PJAX RELOAD中添加initializeLivePhotos()字段。之前也让AI生成解决初始化的问题，但其所应用的LivePhotosKit.Player即将过时，所以换上了Zeee提供的代码，在此谢谢啦。

2.如果你使用图床或对象存储，需要确保跨域设置能允许Access-Control-Allow-Origin Header.

至此，本站也可以宣布用上Live图了！

评论