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

踩过的坑

  1. 图床跨域访问：

    如果你是自建图床，请务必开启跨域访问，而且如果你的图床使用了CDN回源，请务必配置CDN的跨域访问，这个问题困扰了我很久，如果你按照上述配置出现以下情形：



    建议按住 F12进入浏览器控制台，看看是不是出现报错，如果出现这种 blocked by CORS基本上就是跨域访问没跑了

  2. 浏览器支持：

    Apple提供的方案并不支持所有的浏览器，有些浏览器可能不能完全兼容，建议使用Chrome浏览器进行调试，并且停用缓存
  3. <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图

为博客添加Live图的更多相关文章

  1. 如何利用腾讯云COS为静态博客添加动态相册

    前言 本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...

  2. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  3. CSDN博客添加量子恒道统计代码步骤

    CSDN博客添加量子恒道统计代码步骤. 1. 去量子恒道网站统计 注册账户: 2. 添加已有的CSDN博客地址: 3. 添加博客后恒道代码里面会给你一个JavaScript脚本,记下里面的一串数字: ...

  4. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  5. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

  6. 个人博客添加网易云音乐Flash插件

    博客底部添加网易云音乐播放插件 歌单或者歌曲外链可从音乐界面"生成外链播放器"中得到,选择Flash播放插件即可 footer.html文件增加 实现效果: 历史精选文章: Jli ...

  7. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  8. 给博客添加rss订阅

    如果是自己搭建博客,有一个问题是如何写一篇新的文章就可以告诉读者,你写了一篇新的?一个简单方法是使用 rss ,RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple ...

  9. 2019-8-31-jekyll-在博客添加流程图

    title author date CreateTime categories jekyll 在博客添加流程图 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 ...

  10. 2019-9-2-给博客添加rss订阅

    title author date CreateTime categories 给博客添加rss订阅 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17:23 ...

随机推荐

  1. goland JetBrains编辑器：代码爆红找不到引用，但项目可运行

    前言 goland JetBrains 编辑器:代码爆红找不到引用,但项目可运行 解决 goland 缓存已满,需要清除缓存

  2. linux centos8 mirrorlist: No URLs in mirrorlist，更新yum源

    前言 由于官方已经在2021/12/31停止了对CentOS 8的支持,所以需要更新 yum 源,才能使用 更新镜像源 这里用的是阿里的 yum 镜像源 将源文件备份 cd /etc/yum.repo ...

  3. 在 Mac/Windows 系统中使用 Laradock 搭建基于 Docker 的 Laravel 开发环境

    Laradock 是 Docker 提供的完整 PHP 本地开发环境的一个镜像,任何环境下都可以安装 Docker来运行此开发环境,墙裂安利 简介 Laradock 是为 Docker 提供的完整 P ...

  4. selenium自动化测试-获取动态页面小说

    有的网站页面是动态加载的资源,使用bs4库只能获取静态页面内容,无法获取动态页面内容,通过selenium自动化测试工具可以获取动态页面内容. 参考之前的"bs4库爬取小说工具"文 ...

  5. English interview - three interesting questions of algorithm analysis (英语面试- 三道有趣的算法分析题目)

    Background introduction Here are some problems related to Big-O notation. From now on, I will try to ...

  6. FastAPI中Pydantic异步分布式唯一性校验

    title: FastAPI中Pydantic异步分布式唯一性校验 date: 2025/04/02 00:47:55 updated: 2025/04/02 00:47:55 author: cmd ...

  7. VJ结营测试

    A 这题其实自己画一下图可以发现当奇数行为每行都为W,偶数行为W与R交替出现,就可以得到满足题意的图形了. 点击查看代码 #include<bits/stdc++.h> using nam ...

  8. 基于OpenCV与PyTorch的智能相册分类器全栈实现教程

    引言:为什么需要智能相册分类器? 在数字影像爆炸的时代,每个人的相册都存储着数千张未整理的照片.手动分类不仅耗时,还容易遗漏重要瞬间.本文将手把手教你构建一个基于深度学习的智能相册分类系统,实现: 三 ...

  9. 几种JAVA表达式语言计算工具

    测试表达式工具分类 这里测试了几种方式,MS excel,Spring SEPL,MVEL,Google aviator import com.googlecode.aviator.AviatorEv ...

  10. 康谋方案 | BEV感知技术：多相机数据采集与高精度时间同步方案

    随着自动驾驶技术的快速发展,车辆准确感知周围环境的能力变得至关重要.BEV(Bird's-Eye-View,鸟瞰图)感知技术,以其独特的视角和强大的数据处理能力,正成为自动驾驶领域的一大研究热点. 一 ...