为博客添加Live图
Apple提供了很生动的Live实况图，在实际展示的过程中非常生动形象，在撰写博客的过程中，我自己也尝试将博客中嵌入实况图片
其实Apple提供的iCloud网页版为我们提供了很好的示例，为了实现本文开始的效果，我们也将使用Apple官方所提供的方法
资源准备
在了解如何实现Live实况图效果的时候，我们需要了解实况图的组成
实况图本身是由一张图片和视频文件组成，我建议你从iCloud官网或者使用数据线导出：
iCould下载
数据线导出
同时可以看到存在 JPG、PNG、HEIC等多种图片文件和 MOV等视频文件，官方对图片文件没有具体要求，不过有博主推荐都转换成 JPG文件，可以都尝试一下
上传图床
我平时写MD喜欢使用图床，我建议你将图片和视频都上传图床，从而分别获得图片和视频图床链接
MD插入
MD文档的插入分为两部分：
<script>标签的插入- 嵌入网页的插入
在这其中，请将data-photo-src和data-video-src替换成你上传图床的图片和视频链接
<div style="width: 80%; max-width: 640px; aspect-ratio: 1; margin: auto;"
data-live-photo
data-photo-src="https://..."
data-video-src="https://...">
</div>
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
当然如果你在博客内可以设置代码注入，可以将 <script>代码插入到文章页当中去，那么可以不要在MD文档中插入
以下是一个MD文档示例：
### Live Photo 示例
以下是一个 Live Photo 的嵌入示例：
<div style="width: 80%; max-width: 640px; aspect-ratio: 1; margin: auto;"
data-live-photo
data-photo-src="https://..."
data-video-src="https://...">
</div>
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
踩过的坑
- 图床跨域访问：
如果你是自建图床，请务必开启跨域访问，而且如果你的图床使用了CDN回源，请务必配置CDN的跨域访问，这个问题困扰了我很久，如果你按照上述配置出现以下情形：
建议按住F12进入浏览器控制台，看看是不是出现报错，如果出现这种blocked by CORS基本上就是跨域访问没跑了
- 浏览器支持：
Apple提供的方案并不支持所有的浏览器，有些浏览器可能不能完全兼容，建议使用Chrome浏览器进行调试，并且停用缓存 <iframe>标签实现：
有老哥通过<iframe>标签实现了一样的效果，以下是我通过GPT写的一个demo，未尝试过：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Live Photo</title>
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
<style>
.live-photo-container {
width: 100%;
height: 100%;
aspect-ratio: 1;
}
</style>
</head>
<body>
<div id="live-photo" class="live-photo-container" data-live-photo></div>
<script>
// 获取 URL 参数
const urlParams = new URLSearchParams(window.location.search);
const photoSrc = urlParams.get('photo');
const videoSrc = urlParams.get('video');
// 动态设置图片和视频链接
const livePhotoElement = document.getElementById('live-photo');
livePhotoElement.setAttribute('data-photo-src', photoSrc);
livePhotoElement.setAttribute('data-video-src', videoSrc);
</script>
</body>
</html>
### Live Photo 示例
以下是一个通过 `<iframe>` 嵌入的 Live Photo 示例：
<iframe src="live-photo-iframe.html?photo=https://...&video=https://..."
width="320"
height="320"
frameborder="0"
allowfullscreen>
</iframe>
这样的好处是我们不必在每次写作后维护这么多的html标签，你需要将第一个文件上传到网站的某个目录下，然后在标签中调用
参考文章：LivePhotosKit JS
如果你对这类文章感兴趣，欢迎访问小树 | 在博客中添加Live图
posted on
