为博客添加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. vue2中如何使用组合式API和vueuse工具包

    vue2中如何使用组合式API和vueuse工具包 1. 安装 @vue/composition-api 依赖包 yarn add @vue/composition-api # 或 npm insta ...

  2. k8s v1.16.3，Unable to connect to the server: x509: certificate has expired or is not yet valid

    前言 kubernetes 版本为 v1.16.3 使用 kubelet get node 后报错: x509: certificate has expired or is not yet valid ...

  3. python 函数与方法的区别

    函数与方法的区别 并不是类中的调用都叫方法 1.函数要手动传self,方法不用传self. 2.如果是一个函数,用类名去调用,如果是一个方法,用对象去调用. class Foo(object): de ...

  4. Golang 入门 : 变量声明

    变量声明 在Go中,变量是包含值的一块存储.可以使用变量声明为变量命名.只需使用var关键字,后跟所需的名称以及变量将保存的值的类型. 一旦你声明了一个变量,就可以用=为它分配该类型的任何值: qua ...

  5. Flask快速入门3

    十一,Flask Cookies Cookie以文本文件的形式存储在客户端的计算机上.其目的是记住和跟踪与客户使用相关的数据,以获得更好的访问者体验和网站统计信息. Request对象包含Cookie ...

  6. Crealens.ai 免费体验GPT-4o 生图+吉卜力风格化

    自己的一张日常照片,能在几秒内变身为一幅充满童话感的吉卜力风插画?90%的人不知道,如今只需一句话,就能在 ChatGPT 里实现"AI 生图"--这就是 GPT-4o 生图功能的 ...

  7. Maven导包报错Could not resolve dependencies for projectXXX was cached in the local repository....

    问题 将项目和maven仓库一起拿到了内网环境,一直报错无法解析依赖was cached in the local repository, resolution will not be reattem ...

  8. 使用SymPy求解矩阵微分方程

    引言 在数学.物理.工程等领域,微分方程常常被用来描述系统的变化和动态过程.对于多变量系统或者多方程系统,矩阵微分方程是非常常见的,它可以用来描述如电路.控制系统.振动系统等复杂的动态行为.今天,我们 ...

  9. mybatis的输入参数类型

    一.传递简单数据类型 二.传入一个bean对象 三.传入一个包装对象(对象中存放对象)

  10. python，下载图片到本地自定文件夹内的方法

    比如,我们需要下载下面这张图,图片的网络地址:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000 ...