File size: 1,211 Bytes
3efcf7b 8a4825d 3746a16 8a4825d 948d87b 4aa0fd7 fb42803 8a4825d 84dc82f 8a4825d fd5e164 8a4825d 84dc82f 948d87b 8a4825d fb42803 84dc82f 8a4825d 84dc82f 8a4825d fb42803 8c515ab 3efcf7b fb42803 3efcf7b fb42803 |
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 |
import {Loop, Series} from 'remotion';
import React from 'react';
import {Video, staticFile, useVideoConfig} from 'remotion';
import videoSequences from './Assets/VideoSequences.json';
import {TransitionSeries} from '@remotion/transitions';
const VideoStream = React.memo(() => {
const {fps} = useVideoConfig();
return (
<TransitionSeries
style={{
position: 'absolute',
zIndex: 1,
}}
>
{videoSequences.map((entry, index) => {
return (
<TransitionSeries.Sequence
key={index}
from={fps * entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<VideoX entry={entry} />
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
);
});
const VideoX = React.memo(({entry}) => {
const {fps} = useVideoConfig();
const videoProps = {
pauseWhenBuffering: true,
startFrom: (fps * entry.props.startFrom) / 30,
endAt: (fps * entry.props.endAt) / 30,
volume: (fps * entry.props.volume) / 30,
src: staticFile(entry.name),
style: entry?.style,
};
return (
<>
{entry?.loop ? (
<Loop>
<Video {...videoProps} />
</Loop>
) : (
<Video {...videoProps} />
)}
</>
);
});
export default VideoStream;
|