列表页视频懒加载

This commit is contained in:
北枳 2025-09-12 15:25:07 +08:00
parent 72b4c11d80
commit 89448ef0be
2 changed files with 16 additions and 14 deletions

View File

@ -10,8 +10,8 @@ import { ChatInputBox } from '@/components/ChatInputBox/ChatInputBox';
import cover_image1 from '@/public/assets/cover_image3.jpg'; import cover_image1 from '@/public/assets/cover_image3.jpg';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Tooltip, Button } from 'antd'; import { Tooltip, Button } from 'antd';
import { GlassIconButton } from '@/components/ui/glass-icon-button';
import { downloadVideo, getFirstFrame } from '@/utils/tools'; import { downloadVideo, getFirstFrame } from '@/utils/tools';
import LazyLoad from "react-lazyload";
@ -201,18 +201,20 @@ export default function CreateToVideo2() {
{/* 视频/图片区域 */} {/* 视频/图片区域 */}
<div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}> <div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}>
{(project.final_video_url || project.final_simple_video_url || project.video_urls) ? ( {(project.final_video_url || project.final_simple_video_url || project.video_urls) ? (
<video <LazyLoad once>
ref={(el) => setVideoRef(project.project_id, el)} <video
src={project.final_video_url || project.final_simple_video_url || project.video_urls} ref={(el) => setVideoRef(project.project_id, el)}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src={project.final_video_url || project.final_simple_video_url || project.video_urls}
muted className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
loop muted
playsInline loop
preload="none" playsInline
poster={ preload="none"
getFirstFrame(project.final_video_url || project.final_simple_video_url || project.video_urls) poster={
} getFirstFrame(project.final_video_url || project.final_simple_video_url || project.video_urls)
/> }
/>
</LazyLoad>
) : ( ) : (
<div <div
className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500" className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"

View File

@ -14,7 +14,7 @@ import {
EffectCube, EffectCube,
Pagination, Pagination,
} from "swiper/modules"; } from "swiper/modules";
import LazyLoad, { forceCheck } from "react-lazyload"; import LazyLoad from "react-lazyload";
import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe"; import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";