35 lines
750 B
TypeScript
35 lines
750 B
TypeScript
import React from 'react';
|
|
import { AbsoluteFill, OffthreadVideo, Audio, staticFile } from 'remotion';
|
|
|
|
interface VideoLayerProps {
|
|
videoSrc: string;
|
|
audioSrc?: string;
|
|
}
|
|
|
|
/**
|
|
* 视频图层组件
|
|
* 渲染底层视频和音频，视频自动循环以匹配音频长度
|
|
*/
|
|
export const VideoLayer: React.FC<VideoLayerProps> = ({
|
|
videoSrc,
|
|
audioSrc,
|
|
}) => {
|
|
// 使用 staticFile 从 publicDir 加载视频
|
|
const videoUrl = staticFile(videoSrc);
|
|
|
|
return (
|
|
<AbsoluteFill>
|
|
<OffthreadVideo
|
|
src={videoUrl}
|
|
loop
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
}}
|
|
/>
|
|
{audioSrc && <Audio src={staticFile(audioSrc)} />}
|
|
</AbsoluteFill>
|
|
);
|
|
};
|