리액트에서 비디오 재생 기능 구현하는데 오디오가 멈춰버리는 문제가 있습니다.

오디오는 반복 재생이 안 되는 것으로 알고 있어요 .. 그래서 오디오 업는 비디오를 하는데 저희는 지금은 타입스크립트를 안 사용해서 ... 아래 막 적어봅니다 만약 한다면 비디오랑 오디오로 별도로 처리해 할 거예요 HTMLMediaElement 요거 사용하면 되는데 const videoRef = useRef<HTMLVideoElement>(null); const audioRef = useRef<HTMLAudioElement>(null); 해서 <video ref={videoRef} loop> <source src="video.mp4" type="video/mp4" /> </video> <audio ref={audioRef} loop> <source src="audio.mp3" type="audio/mp3" /> </audio> 이렇게 따로 주고 if (videoRef.current && audioRef.current) { videoRef.current.addEventListener("play", () => { audioRef.current?.play(); }); videoRef.current.addEventListener("pause", () => { audioRef.current?.pause(); }); videoRef.current.addEventListener("ended", () => { audioRef.current?.currentTime = 0; audioRef.current?.play(); }); 이렇게 이벤트 핸들링 하면 좋지 않을까요?? 아 만약 안되면 어쩔 수 없죠 GPT한테 물어봐야죠 하하하

안녕하세요! 리액트와 타입스크립트로 비디오 재생 문제를 해결해 드리겠습니다. loop를 돌 때마다 오디오가 멈춰지는 문제는 비디오의 ' ended ' 이벤트를 감지하고, 비디오와 오디오를 동시에 재생하는 방법을 사용하면 해결할 수 있습니다. 아래 코드 예제를 참고해 주세요. 아래 예제에서는 ' ended ' 이벤트가 발생할 때마다 비디오와 오디오를 동시에 재생합니다. 또한, ' useEffect '를 사용하여 이벤트 리스너를 추가하고 정리합니다. 이 코드를 프로젝트에 적용하면, 비디오가 반복 재생될 때 오디오도 함께 재생됩니다. 비디오와 오디오 파일 경로는 본인의 프로젝트에 맞게 수정해 주세요. 도움이 되었길 바랍니다!

1import React, { useRef, useEffect } from 'react';
2
3const VideoPlayer: React.FC = () => {
4  const videoRef = useRef<HTMLVideoElement>(null);
5  const audioRef = useRef<HTMLAudioElement>(null);
6
7  useEffect(() => {
8    const handleVideoEnded = () => {
9      if (videoRef.current && audioRef.current) {
10        videoRef.current.currentTime = 0;
11        audioRef.current.currentTime = 0;
12        videoRef.current.play();
13        audioRef.current.play();
14      }
15    };
16
17    if (videoRef.current) {
18      videoRef.current.addEventListener('ended', handleVideoEnded);
19    }
20
21    return () => {
22      if (videoRef.current) {
23        videoRef.current.removeEventListener('ended', handleVideoEnded);
24      }
25    };
26  }, []);
27
28  const handlePlay = () => {
29    if (videoRef.current && audioRef.current) {
30      videoRef.current.play();
31      audioRef.current.play();
32    }
33  };
34
35  return (
36    <div>
37      <video ref={videoRef} width="320" height="240" muted>
38        <source src="your_video_file.mp4" type="video/mp4" />
39      </video>
40      <audio ref={audioRef}>
41        <source src="your_audio_file.mp3" type="audio/mpeg" />
42      </audio>
43      <button onClick={handlePlay}>Play</button>
44    </div>
45  );
46};
47
48export default VideoPlayer;