这是一个创建于 135 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近写博客的时候想插入 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 条附言 · 135 天前
实现了~
就按照上面我给的方法 如果是使用对象存储的话记得启用跨域访问~
就按照上面我给的方法 如果是使用对象存储的话记得启用跨域访问~
7 条回复 • 2024-08-16 17:23:29 +08:00
 |
1
kk2syc 135 天前
|
 |
3
lynan 135 天前
好巧，最近刚刚在博客里插入了 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> ``` |
 |
5
bugmaker233 135 天前
https://lynan.cn/journey-to-kagoshima/ 之前 V2EX 上某个人分享的
|
|
7
lynan 134 天前  1
@Aicnal #4 昨天把我的 Live Photo 组件上传到 GitHub 了，https://github.com/LynanBreeze/live-photo 希望对你有帮助～
|
Select Language