livephoto.js

一个轻量级、无依赖的 JavaScript 库，用于在网页上完美复现手机拍摄的 Live Photo（动态照片）效果。

使用展示

动图展示
Live
动图展示

安装

从GitHub上下载最新版本的 livephoto.js 和 livephoto.css 文件，并将它们放置在你的网页项目中。

1
git clone https://github.com/cykzht/livephoto.js.git

完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>LivePhoto Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="livephoto.css" />
    <!-- 覆盖样式 -->
    <style>
      .live-photo-container {
        border-radius: 0 !important;
      }
      .live-photo-video {
        border-radius: 0 !important;
      }
    </style>
  </head>
  <body>
    <!-- Live Photo 容器示例 -->
     <!-- 可设置宽度高度 -->
    <div class="live-photo-container" style="width: 400px; height: 300px">
      <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
      <video muted playsinline class="live-photo-video">
        <source src="path/VID.mp4" type="video/mp4" />
      </video>
    </div>
    <!-- 一行两张图片 -->
    <div class="image-grid">
      <div class="image-column">
        <div class="live-photo-container">
          <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
          <video muted playsinline class="live-photo-video">
            <source src="path/VID.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
      <div class="image-column">
        <div class="live-photo-container">
          <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
          <video muted playsinline class="live-photo-video">
            <source src="path/VID.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>

    <!-- 引入脚本 -->
    <script src="livephoto.js"></script>
    <script>
      // 配置对象
      const config = {
        autoplay: true,
        hover_to_play: true,
        click_to_play: true,
        lazy_load: true,
        threshold: 0.8,
        badge: true,
        badge_text: "Live",
        badge_position: "bottom-left",
        loading_animation: true,
        preload: "auto",
        keep_observing: false,
        hover_delay: 300,
        weixin_disable_autoplay: true,
      };
      // 调用初始化函数
      initLivePhoto(config);
    </script>
  </body>
</html>

引入组件

您需要在HTML文件中引入 livephoto.css 和 livephoto.js 文件：

1
2
<link rel="stylesheet" href="livephoto.css" />
<script src="livephoto.js"></script>

HTML结构

在您的HTML中，创建一个包含静态图片和视频的容器。确保图片和视频文件路径正确。

1
2
3
4
5
6
<div class="live-photo-container">
    <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
    <video muted playsinline class="live-photo-video">
        <source src="path/VID.mp4" type="video/mp4" />
    </video>
</div>

一行两张图片布局示例

在CSS中内置了一个简单的网格布局类，可以方便地实现一行两张图片的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="image-grid">
  <div class="image-column">
    <div class="live-photo-container">
      <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
      <video muted playsinline class="live-photo-video">
        <source src="path/VID.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
  <div class="image-column">
    <div class="live-photo-container">
      <img src="path/IMG.jpg" alt="描述文字" class="live-photo-static" />
      <video muted playsinline class="live-photo-video">
        <source src="path/VID.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</div>

覆盖样式

如果您不喜欢默认的样式，可以通过CSS覆盖（这里以去掉圆角为例）：

1
2
3
4
5
6
7
8
<style>
  .live-photo-container {
    border-radius: 0 !important;
  }
  .live-photo-video {
    border-radius: 0 !important;
  }
</style>

初始化

在引入 livephoto.js 之后，调用 initLivePhoto 函数来初始化组件。您可以传递一个配置对象来定制组件的行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const config = {
    autoplay: true, // 是否自动播放（当进入视口时）
    hover_to_play: true,  // 是否启用悬停播放
    click_to_play: true,  // 是否启用点击播放
    lazy_load: true,  // 是否启用懒加载
    threshold: 0.8, // 触发自动播放的可见比例
    badge: true,  // 是否显示Live标识
    badge_text: "Live", // 标识文字
    badge_position: "bottom-left",  // 标识位置: bottom-left, bottom-right, top-left, top-right
    loading_animation: true,  // 是否显示加载动画
    preload: "auto",  // 预加载选项：'auto', 'metadata', 'none'
    keep_observing: false,  // 是否持续观察元素
    hover_delay: 300, // 悬停延迟时间（毫秒）
    weixin_disable_autoplay: true,  // 是否禁用微信内置浏览器的自动播放
};
initLivePhoto(config);

注意事项

  1. 视频格式：推荐使用H.264编码的MP4格式，以确保在大多数浏览器上的兼容性。
  2. 性能：虽然插件已做优化，但请注意视频文件不宜过大，建议使用速度较快的CDN托管视频资源。
  3. 浏览器支持：确保您的浏览器支持HTML5视频播放功能，经过测试以后，小米浏览器 会将视频转换为视频播放器，虽然不影响观看，但你会失去下载静态图片的机会和动态播放的体验。
  4. 微信浏览器：由于微信内置浏览器对自动播放有严格限制，建议开启 weixin_disable_autoplay 选项，避免自动播放造成的白屏问题。

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT

支持

如果这个插件帮助到了你，请给予一个 star ⭐。在使用过程中遇到任何问题，请提交 Issue。