html에서의 video 태그를 이용하여 아이템들의 이미지에 비디오를 넣어서 보여주는 부분이 필요하였다.
기존 property src에 값을 넣어주어서 재생을 시켰었다. 너무 잘 나왔다.
하지만, 랜더링을 하고 끝이 나면 상관없지만 아이템들을 담은 배열에 가공을 한다던지 새로운 데이터들을 불러와 src에 넣어서 돌려줘하는 경우 (예를 들어, 필터적용과 같은.. ) 기존의 비디오 객체를 제대로 초기화해주지 못하는 현상이 생겼다.
랜더링을 하는 과정에서 제대로 초기화가 되지않고 넣은 탓에 기존의 객체가 남아있어서 그전에 영상이 틀어지는 것 같았다.
동영상 플레이어 구성요소에 올바른 props 또는 state 값을 전달하고 있는지 확인을 해야 했고, URL이 변경될 때 플레이어 소스를 올바르게 업데이트하고 있는지 확인해야 했다.
물론, 위의 확인 과정으로 해결할 수는 있었을 것 같았으나 간단히 이를 해결할 수 있는 패키지를 찾았다. 바로 react-player이다.
비디오 태그 대신 react-player를 사용하여 이 문제를 해결하였다. 기존의 비디오 태그보다 좀 더 고급기능이 있고, react.js나 next.js에 좀 더 맞는 비디오플레이어인 것 같다.
Demo page: https://cookpete.com/react-player
Reference page : https://www.npmjs.com/package/react-player