为博客添加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. 【记录】C-文件输入输出

    写在开头   摸鱼摸得昏天黑地,是该炸一炸鱼的本愿了~ 以前总觉得笔记没什么重要的,但有时事到临头,又十分渴求简明的提纲来唤起记忆/提供重学的门路.于是就有了以下的产物,也希望能抑制一下无效摸鱼的堕落 ...

  2. docker login harbor x509: certificate signed by unknown authority

    前言 docker login harbor x509: certificate signed by unknown authority 解决 打开 /etc/docker/daemon.json,如 ...

  3. Math类、System类--java进阶day05

    1.Math类 Math类里所有方法都被static修饰,说明它是一个工具类,不需要创建对象,直接类名调用 2.Math方法展示 . 3.System类 SYstem方法展示 1.currentTim ...

  4. js 小数取整

    小数取整 var num = 123.456; // 常规方法 console.log(parseInt(num)); // 123 // 双重按位非 console.log(~~num); // 1 ...

  5. Oracle PLSQL 存储过程无法进入单步调试

    使用PLSQL工具调试存储过程的时候,不管你怎么设置断点,当你点击测试的时候就瞬间执行而过你无法进入单步调试 解决办法:

  6. Sql Server执行情况

    --- 1.查找目前SQL Server所执行的SQL语法,并展示资源情况: SELECT s2.dbid , DB_NAME(s2.dbid) AS [数据库名] , --s1.sql_handle ...

  7. H5 电商新势力崛起：ZKmall模板商城 H5 版本的高性能开发秘籍

    H5电商新势力的崛起中,ZKmall模板商城H5版本以其高性能和灵活性脱颖而出.以下是ZKmall模板商城H5版本的高性能开发秘籍,结合技术选型.架构优化与核心实践,为全场景电商应用提供高效解决方案: ...

  8. Spring AOP面向切面编程 通知类型

    Spring AOP面向切面编程 通知类型 通知分为: 前置通知 执行方法之前通知 后置通知 执行方法之后通知 异常通知 相当于cache里面的内容 最终通知 相当于finally 环绕通知 前四种通 ...

  9. 奶奶都能看懂的 CSS 选择器基础语法&常用属性&优先级

    标题都是奶奶都能看懂了,那么我们肯定从最基础的开始讲.之所以这么自信是因为能踩的坑全帮你们踩过了-- 开始之前,先来首诗感受一下,具体啥意思你看完本文就懂了. 点类井号逗为或,类多号单连为且. id ...

  10. Python3 + selenium 获取疫情中高风险区数据

    背景: 需要动态将疫情风险区数据和区域业务动作想结合, 赋能销售业务, 内部使用非商用哈 环境: Python3 + selenium 自动化测试软件中 Chrome 驱动 exe 文件 输出: 以 ...