如何在 Markdown 中使用 Live 图效果呢

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 35 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近写博客的时候想插入 Live 图，就是那种在 iCloud 上预览的那种效果参考了： https://developer.apple.com/live-photos/和 https://developer.apple.com/documentation/livephotoskitjs 效果都不是很好在 markdown 插入 html 代码块之后无法正常加载也尝试使用 iframe 还是不行想问问各位老哥有没有什么其他的方法能够实现这种 Live 图的互动效果官方给的示例代码是这样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
    </head>
    <body>
        <div
            data-live-photo
            data-photo-src="https://..."
            data-video-src="https://..."
            style="width: 320px; height: 320px">            
        </div>
    </body>
</html>

将对应资源替换后我的本地预览是这样的：

第 1 条附言 · 35 天前

实现了~
就按照上面我给的方法如果是使用对象存储的话记得启用跨域访问~

7 条回复 • 2024-08-16 17:23:29 +08:00

kk2syc

35 天前

找到的代码案例：

网站支持 Live Photo 图片展示
https://www.hsuyeung.com/article/support-live-photo

Aicnal

35 天前

@kk2syc 感谢不过我好像又碰到跨界访问的问题了难搞

lynan

35 天前

好巧，最近刚刚在博客里插入了 Live Photo 。
效果预览可以进入我的文章页面查看： https://lynan.cn/journey-to-kagoshima/
穿插在“日程”的图片里面。为了统一移动端和桌面端交互，播放方式是点击左上角的 “LIVE” 图标进行播放。

插入方式是一个 iframe

```
<iframe src="/static/live-photo/?picUrl=https://r2-assets.lynan.cn/u/A001_07251216_C317-FfGABM.jpg&videoUrl=https://r2-assets.lynan.cn/u/A001_07251216_C317-DQ6Nj6.mp4" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%; aspect-ratio: 16/9;"></iframe>
```

Aicnal

35 天前

@lynan 是的！我就是受到大佬的启发也尝试在自己的博客里面插入 Live 图的

bugmaker233

35 天前

https://lynan.cn/journey-to-kagoshima/ 之前 V2EX 上某个人分享的

Lcode01

35 天前

@kk2syc 不错，学习了

lynan

34 天前

@Aicnal #4 昨天把我的 Live Photo 组件上传到 GitHub 了，https://github.com/LynanBreeze/live-photo 希望对你有帮助～