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

35 天前
 Aicnal

最近写博客的时候想插入 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>

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

1165 次点击
所在节点    程序员
7 条回复
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 希望对你有帮助～

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1065151

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX