Wie spiele ich nach dem anderen reibungslos in Reaktionen ohne Störungen bei der Aktualisierung der Video -URL vom Serve
Posted: 19 Aug 2025, 11:39
Ich erstelle eine React -Komponente, in der ich nacheinander Videos abspielen muss. Die nächste Video -URL wird vom Server erst nach dem aktuellen Abschluss empfangen. Ich möchte, dass sich der Übergang glatt anfühlt, wie eine nahtlose Fortsetzung ohne visuelles Flackern.
`
Was ich möchte:
Wenn ein Video endet und ich ein neues Ergebnis aus dem Server erhalte, sollte er sofort ohne Flash/Glitch abspielen.>
Code: Select all
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;
Was ich möchte:
Wenn ein Video endet und ich ein neues Ergebnis aus dem Server erhalte, sollte er sofort ohne Flash/Glitch abspielen.>