可爱静

记录生活、学习和工作

0%

Hexo集成LivePhoto

发表于 分类于
本文字数： 2.6k 阅读时长 ≈ 2 分钟

昨日看到一网友分享，在个人博客里集成Live Photo，甚是炫酷！必须借鉴一手。

奈何技术水平不高，只能使用AI辅助编写。

背景

Hexo + cactus主题

步骤

新增livephoto.js 和 livephoto.css

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
/**
 * LivePhotos integration for Hexo
 * This script handles the integration of Apple's LivePhotosKit.js
 */

(function() {
  // 当文档加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    // 查找所有带有live-photo类的元素
    var livePhotoElements = document.querySelectorAll('.live-photo');

    if (livePhotoElements.length > 0) {
      // 如果页面上有实况照片元素，才加载LivePhotosKit.js
      var script = document.createElement('script');
      script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
      script.onload = function() {
        // LivePhotosKit.js加载完成后，初始化所有实况照片
        initializeLivePhotos(livePhotoElements);
      };
      document.head.appendChild(script);
    }
  });

  // 初始化所有实况照片元素
  function initializeLivePhotos(elements) {
    elements.forEach(function(element) {
      // 获取照片和视频的URL
      var photoSrc = element.getAttribute('data-photo-src');
      var videoSrc = element.getAttribute('data-video-src');

      if (photoSrc && videoSrc) {
        // 创建LivePhotosKit播放器
        var player = LivePhotosKit.Player(element);

        // 设置照片和视频源
        player.photoSrc = photoSrc;
        player.videoSrc = videoSrc;

        // 添加鼠标悬停事件来播放实况照片
        element.addEventListener('mouseenter', function() {
          player.play();
        });

        element.addEventListener('mouseleave', function() {
          player.pause();
        });

        // 添加触摸事件支持（移动设备）
        element.addEventListener('touchstart', function() {
          player.play();
        });

        element.addEventListener('touchend', function() {
          player.pause();
        });

        // 添加样式
        element.style.position = 'relative';
        element.style.overflow = 'hidden';
        element.style.display = 'inline-block';
      }
    });
  }
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.live-photo {
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 4/3;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.live-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.live-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

修改文件引用

1
2
3
4
// <meta name="keywords" content= "<%= (theme.keywords) %>">
// meta标签之下
<!-- livephotos styles -->
    <%- css('css/livephotos') %>
1
2
// <%- js('js/main') %> 43行之下
<%- js('js/livephotos') %>

编写示例

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

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

实现效果

点击查看