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

오디오는 반복 재생이 안 되는 것으로 알고 있어요 .. 그래서 오디오 업는 비디오를 하는데 저희는 지금은 타입스크립트를 안 사용해서 ... 아래 막 적어봅니다 만약 한다면 비디오랑 오디오로 별도로 처리해 할 거예요 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 '를 사용하여 이벤트 리스너를 추가하고 정리합니다. 이 코드를 프로젝트에 적용하면, 비디오가 반복 재생될 때 오디오도 함께 재생됩니다. 비디오와 오디오 파일 경로는 본인의 프로젝트에 맞게 수정해 주세요. 도움이 되었길 바랍니다!

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
import React, { useRef, useEffect } from 'react';

const VideoPlayer: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    const handleVideoEnded = () => {
      if (videoRef.current && audioRef.current) {
        videoRef.current.currentTime = 0;
        audioRef.current.currentTime = 0;
        videoRef.current.play();
        audioRef.current.play();
      }
    };

    if (videoRef.current) {
      videoRef.current.addEventListener('ended', handleVideoEnded);
    }

    return () => {
      if (videoRef.current) {
        videoRef.current.removeEventListener('ended', handleVideoEnded);
      }
    };
  }, []);

  const handlePlay = () => {
    if (videoRef.current && audioRef.current) {
      videoRef.current.play();
      audioRef.current.play();
    }
  };

  return (
    <div>
      <video ref={videoRef} width="320" height="240" muted>
        <source src="your_video_file.mp4" type="video/mp4" />
      </video>
      <audio ref={audioRef}>
        <source src="your_audio_file.mp3" type="audio/mpeg" />
      </audio>
      <button onClick={handlePlay}>Play</button>
    </div>
  );
};

export default VideoPlayer;