技术技术网站

在博客中添加Live图

小树2024-08-15

为博客添加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>

1	<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>