Hexo博客集成LivePhoto

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

奈何技术水平不高,只能使用AI辅助编写,使用海外版的Trae。直接输入指令,让AI帮我集成Apple's LivePhotosKit.js

背景

Hexo + cactus主题

步骤

新增livephoto.js 和 livephoto.css

javascript 复制代码
/**
 * 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';
      }
    });
  }
})();
javascript 复制代码
.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;
}

修改文件引用

javascript 复制代码
// <meta name="keywords" content= "<%= (theme.keywords) %>">
// meta标签之下
<!-- livephotos styles -->
    <%- css('css/livephotos') %>
javascript 复制代码
// <%- js('js/main') %> 43行之下
<%- js('js/livephotos') %>

编写示例

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

html 复制代码
<div class="live-photo" data-photo-src="https://你的OSS地址/照片.JPEG" data-video-src="https://你的OSS地址/视频.MOV">
</div>
相关推荐
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz4 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_1237 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界7 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子7 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
Hilaku7 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery