Как воспроизводить видео один за другим в реагирование без сбоев при обновлении видео URL с сервера? ⇐ Javascript

[Anonymous]

Я строю компонент React, где мне нужно играть в видео один за другим. Следующее видео URL получено с сервера только после того, как текущий закончен. Я хочу, чтобы переход чувствовал себя гладким, как плавное продолжение без визуального мерцания. < /P>
Вот упрощенная версия моего кода: < /p>

Код: Выделить всё

import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';

interface DidAvatarProps {
resultUrl?: string;
handleCallDisconnect: () => void;
onAudioCompletion: () => void;
}

const DidAvatar = ({ resultUrl, handleCallDisconnect, onAudioCompletion }: DidAvatarProps) => {
const idleVideo = '/assets/didAnimation/maryIdle.mp4';
const [videoSrc, setVideoSrc] = useState(resultUrl || idleVideo);

useEffect(() => {
// Whenever resultUrl changes, reset the video source
if (resultUrl) {
setVideoSrc(resultUrl);
} else {
setVideoSrc(idleVideo);
}
}, [resultUrl]);

const handleEnded = () => {
setVideoSrc(idleVideo);
onAudioCompletion();
};

return (






Fist video




);
};

export default DidAvatar;

`
Что я хочу:
Когда одно видео заканчивается, и я получаю новый результат от сервера, оно должно играть немедленно без вспышки/глюка.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-when-upd