为博客添加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. js回忆录（2） -- 逻辑表达式，条件语句

    之所以要把逻辑表达式和条件语句放一块写一下,完全是因为二者的联系太过紧密,逻辑运算产生布尔值的结果,而条件语句则根据布尔值决定走那个分支. 逻辑与: &&, 首先逻辑与有逻辑与运算功能 ...

  2. golang 使用goto进行多错误处理

    goto 语句介绍 在 Go 语言中,可以通过goto语句跳转到标签,进行代码间的无条件跳转.另外,goto语句在快速跳出循环.避免重复退出方面可以简化代码实现过程,但在结构化程序设计中一般不主张使用 ...

  3. Git 命令使用体验的神器 -- tig

    tig, 就是把 Git 这个单词倒过来念, 它是一个命令行工具, 日常使用中我用它来取代 Git 最高频的几个操作, 如 git log, git diff 以及 git blame等, 使用常见安 ...

  4. B@se-还原错误字母表转码的base64编码

    题目: 密文:MyLkTaP3FaA7KOWjTmKkVjWjVzKjdeNvTnAjoH9iZOIvTeHbvD== JASGBWcQPRXEFLbCDIlmnHUVKTYZdMovwipatNOe ...

  5. Tomcat的优化（分别为操作系统优化（内核参数优化），Tomcat配置文件参数优化，Java虚拟机（JVM）调优）

    Tomcat的优化        一.Tomcat 优化                Tomcat 配置文件参数优化        二.系统内核优化        三.Tomcat 配置 JVM 参 ...

  6. unigui的程序编译后自动运行傻傻的手动【7】

    我们每次修改unigui程序后,一般需要编译后执行,查看效果.可是每次都要关闭杀掉服务程序,再刷新浏览器才能实现. EMB应该知道这个反人类的做法吧.实际上提供了参数配置:自动kill服务程序,自动打 ...

  7. 学习Kotlin语法（四）

    简介 在上一节,我们对Kotlin中函数的相关知识有了大致的了解,本章节我们将去了解一些Kotlin中的作用域函数. 目录 let:处理可空对象,链式操作 run:对象配置 + 计算返回值 with: ...

  8. 感觉程序员要被 AI 淘汰了？学什么才有机会？

    感觉程序员要被 AI 淘汰了?学什么才有机会? ️ 推荐观看视频版:https://www.bilibili.com/video/BV1i9Z8YhEja AI 会淘汰程序员么? 我的答案是 &quo ...

  9. 一文速通 Python 并行计算：07 Python 多线程编程-线程池的使用和多线程的性能评估

    一文速通 Python 并行计算:07 Python 多线程编程-线程池的使用和多线程的性能评估 摘要: 本文介绍了 Python 线程池(ThreadPoolExecutor)的使用方法,包括线程池 ...

  10. 关于wireshark抓包工具抓取登录数据的一点心得

    研究这个软件很久了,一直处于门外汉状态,今天终于用它抓到点有用的东西,做个简单的笔记吧,后面再继续完善. 最近研究跨域自动登录时一直不太顺利,今天就仿照网上前辈们的方法,用wireshark先抓一下手 ...