实况图预览
LivePhotosKit JS
首先需要使用苹果官方提供的JavaScript库
https://developer.apple.com/documentation/livephotoskitjs
编码规范：
一般实况图片都是有两个文件,一个是常规JPG图片,一个是音频视频文件后缀为MOV格式。但是LivePhoto由一个HEIC格式的静态图像和一个编码为HEVC的MOV格式小视频组成，需要将视频转码为MP4（H.264编码）并把HEIC图像转换为JPG格式才能在Web上展示。
实现方式：
- 首先引入livephotoskit.js
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>- 然后需要一个容器
<div
data-live-photo
data-photo-src="https://xxxx"
data-video-src="https://xxxx"
style="width: 320px; height: 320px"
></div>
<!-- data-photo-src 为常规图片地址 -->
<!-- data-video-src 为音频地址 -->- 打开预览，正常是鼠标进入开始播放，如果希望进入页面就播放一次可以调用官方提供的方法
<script>
// 等在dom加载完毕
document.addEventListener("DOMContentLoaded", function () {
const player = LivePhotosKit.Player(
document.querySelector("[data-live-photo]")
);
player.play();
});
</script>- 然后进入页面就会自动播放
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>liveImage</title>
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>
<body>
<div
data-live-photo
data-photo-src="https://xxxx.jpg"
data-video-src="https://xxxx,mp4"
style="width: 320px; height: 320px"
></div>
<!-- data-photo-src 为常规图片地址 -->
<!-- data-video-src 为音频地址 -->
<script>
// 等在dom加载完毕
document.addEventListener("DOMContentLoaded", function () {
const player = LivePhotosKit.Player(
document.querySelector("[data-live-photo]")
);
player.play();
});
</script>
</body>
</html>