首先需要使用苹果官方提供的JavaScript库
地址:https://developer.apple.com/documentation/livephotoskitjs
注意:
一般实况图片都是有两个文件 一个是常规图片 一个是音频视频文件后缀为MOV格式
实现方式上:
首先引入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"
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>
</body>
</html>