相关JS和CSS代码
<style>
/* LivePhoto容器样式 */
[data-live-photo] {
width: 100%;
max-width: 640px;
aspect-ratio: 1;
margin: 0 auto 20px;
background: transparent;
border-radius: 12px;
overflow: hidden;
position: relative; /* 新增 */
}
/* 覆盖LivePhoto内部元素的圆角 */
[data-live-photo] .lpk-live-photo-renderer,
[data-live-photo] .lpk-render-layer,
[data-live-photo] canvas {
border-radius: inherit !important; /* 强制继承父容器圆角 */
}
/* 确保所有层级都继承圆角 */
[data-live-photo] > div {
border-radius: inherit;
overflow: hidden;
}
</style>
<script>
// 加载官方库
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
document.head.appendChild(script);
});
// 自动初始化
window.LivePhotosKitConfig = {
processReplace: true // 自动查找所有[data-live-photo]元素
};
</script>初始代码 (chatgpt-4o)
> 根据你的需求，我为你整理了无需插件的实现方案：
>
> 1. **添加CSS样式**（放入自定义CSS）:
> ```css
> /* LivePhoto容器样式 */
> [data-live-photo] {
> width: 100%;
> max-width: 640px;
> aspect-ratio: 1;
> margin: 0 auto 20px;
> background: #f0f0f0;
> }
> ```
>
> 2. **添加JS代码**（放入自定义JS）:
> ```javascript
> // 加载官方库
> document.addEventListener('DOMContentLoaded', function() {
> const script = document.createElement('script');
> script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
> document.head.appendChild(script);
> });
>
> // 自动初始化
> window.LivePhotosKitConfig = {
> processReplace: true // 自动查找所有[data-live-photo]元素
> };
> ```
>
> 3. **文章内容书写格式**（直接写在文章正文中）：
> ```html
> <div data-live-photo
> data-photo-src="图片URL"
> data-video-src="视频URL"></div>
> ```
>
> 4. **可选扩展**（如果需要更灵活的尺寸控制，可在HTML中添加）：
> ```html
> <div data-live-photo
> style="width: 500px; height: 300px;"
> data-photo-src="图片URL"
> data-video-src="视频URL"></div>
> ```
>
> **使用说明**：
> 1. 直接在文章中用`<div data-live-photo>`标签代替原来的`{live}`短代码
> 2. 图片和视频URL分别放在`data-photo-src`和`data-video-src`属性中
> 3. 默认会保持1:1比例，如需自定义尺寸可添加行内style样式
>
> **优势**：
> - 完全去插件化
> - 无需后台配置
> - 使用苹果官方CDN资源
> - 支持响应式布局
> - 兼容所有现代浏览器
>
> **效果验证**：
> 插入内容后，页面中应该会出现可交互的LivePhoto效果，长按/鼠标悬停会播放动态效果。
