1. 문제
댕지용 화면을 구현하기 위해 <video>태그를 가져다 쓰는데, 웹에 올려진 경로는 잘 찾아오는데, 상대경로로 지정해도 바로 .mp4 파일이 불러지지 않은 현상이 발생하였다.
2. 원인
어떠한 static한 성질을 가지고 있는 video, images, etc는 public folder에 놓여져야 한다. 왜냐하면 public folder 같은 경우 webpack에서 처리가 되지 않기 때문에 그대로 볼 수 있기 때문이다. public 폴더 놓지 않을 때에 webpack 으로 인해 변형이 일어 수 있기 때문이다.
그래서인지 몰라도 src 폴더에 있는 mp4 같은 경우 불러 올 수 가 없었다.
3. 해결
어떠한 파일 url은 모두 public 폴더를 지정하기 때문에,
./는 파일 디렉토리를 지정한다. 그러므로 public/video에 접근 하려면 그냥 src='video.mp4'라 적으면 된다.
나 같은 경우에는 videos 폴더를 만들어주고 src='videos/login.mp4'이러한 형식으로 접근하였다. 힛! 댕지용 화면 완성! 곧 내가 댕노가다한 부분 포스팅을 진행할 건데 문젠, 지금 아이콘 마음에 안들어서 다시 첨부터 디자인 뒤집어 엎고 있다는 게 함정...💧
ref. https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video
✞