前端WEB预览苹果实况图LIve

最新推荐文章于 2025-04-25 17:27:46 发布

Is无糖

最新推荐文章于 2025-04-25 17:27:46 发布

阅读量1.5k

点赞数 6

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_63877939/article/details/140009274

版权

首先需要使用苹果官方提供的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>