File size: 1,254 Bytes
5fa0fe3 8a4825d 3746a16 8a4825d 948d87b 4aa0fd7 fb42803 8a4825d 84dc82f 8a4825d fd5e164 8a4825d 84dc82f 948d87b 8a4825d fb42803 84dc82f 8a4825d 84dc82f 8a4825d fb42803 8c515ab 3efcf7b a2dcb8b 3efcf7b fb42803 3efcf7b 472c499 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 |
import {Loop} 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 ? entry.style : {},
playbackRate: entry.props.playbackRate ? entry.props.playbackRate : 1,
};
return (
<>
{entry?.loop ? <Video loop {...videoProps} /> : <Video {...videoProps} />}
</>
);
});
export default VideoStream;
|