React / NextJS 사용자가 입력한 링크로 영상 정보를 받아오고 영상 임베드하는 기능을 만들고 싶습니다.

Question

안녕하세요. NextJs로 SNS 종류의 웹사이트를 만들고 있는 프론트엔드 개발자입니다.사이트 기능 중에 사용자가 유튜브나 페이스북 같은 미디어 플랫폼의 링크를 업로드하면 해당 링크의 영상을 사이트에 임베드해서 보여주는 기능이 있습니다.그리고 해당 영상의 제목과 썸네일 등의 정보를 가져와서 임베드한 영상과 함께 보여주고 싶습니다.현재는 videojs의 videojs-youtube 라이브러리를 사용해서 유튜브 영상을 보여주고 있는데, 저는 유튜브 뿐만 아니라 페이스북, 틱톡 등 다양한 미디어 플랫폼이 호환이 되었으면 좋겠습니다.그리고 영상의 정보도 가져와야 하고요.사실 단순히 외부 링크에 대한 영상을 임베드해서 보여주는 정도라면 굳이 videojs 라이브러리를 사용해야 하나 라는 생각이 듭니다.링크에서 video ID를 가져와서 임베드 코드 형식으로 iframe에 넣어도 충분히 영상 임베드가 가능하기 때문입니다.또한, videojs에는 유튜브 플러그인은 있지만 다른 미디어 플랫폼 플러그인은 찾기 힘듭니다.그래서 생각한 방법이,Noembed라는 서비스를 사용해서 제목, 썸네일, 임베드 코드 등을 받아 사용한다.하지만 제공되지 않는 플랫폼도 있고, 믿을 만한 서비스인지도 모르겠고, 저작권에 대한 문제 때문에 고민됩니다.각 미디어 플랫폼에서 제공하는 임베드 코드와 API를 사용한다.이 방법이 가장 좋겠지만, 각 미디어 플랫폼에 대해 전부 찾아서 따로 적용해야 하고, 제공하는 서비스가 무료가 아닌 경우도 있을 수 있어 고민입니다.개발자분들은 사용자가 입력한 미디어 플랫폼 링크로 영상을 보여주고, 영상의 제목과 썸네일 등의 정보를 받아오는 기능을 만들 때 어떤 방법을 쓰는지 궁금합니다.최대한 다양한 미디어 플랫폼을 지원하고 싶고, 상업적으로 이용하게 될 가능성이 있어서 저작권 관련해 문제 없이 적용해야 합니다.읽어주셔서 감사합니다.

React / NextJS 사용자가 입력한 링크로 영상 정보를 받아오고 영상 임베드하는 기능을 만들고 싶습니다.

0개의 답변

#iframe 목록