博客实现LivePhoto

技术

实况照片示例

这是一个展示如何在Hexo博客中使用Apple实况照片的示例页面。

使用方法

在Markdown文件中，你可以使用以下格式添加实况照片：

1
2
<div class="live-photo" data-photo-src="https://你的OSS地址/照片.JPEG" data-video-src="https://你的OSS地址/视频.MOV">
</div>

实际效果

下面是一个实际的实况照片示例：

注意事项

  1. 确保你的OSS已正确配置CORS，允许从你的博客域名访问资源
  2. 实况照片需要同时提供JPEG图片和MOV视频文件
  3. 在鼠标悬停或触摸时，实况照片会自动播放
  4. 移开鼠标或结束触摸后，实况照片会暂停播放

技术实现

本功能使用了Apple官方提供的LivePhotosKit.js库实现，该库已集成到博客主题中。