커뮤니티토픽게시판

최근 개설한 커뮤니티 사이트에 외부에서 배포되는 영상들을 공유하기 쉽도록 외부의 영상들(유튜브,카카오tv,네이버tv 등...) 사이트에서 영상을 바로 재생할 수 있도록 해보려고 했습니다.

 

우선 배포된 임베드파싱 모듈 과 유료 자료인 에디터자동완성 모듈 두가지 중 하나를 선택하게 됩니다.

 

 

두가지 모두 만족하지 못하는 지점이 발생합니다.

 

제가 임베드파싱모듈로(글 읽을 때 변환하여 보여주는 방식) 제공했을때 아쉬운 점이 최근에 방송사들이 방송직후 배포하는 짧은 영상들이 유튜브가 아닌 경우가 많아졌다는 점인데 이러한 영상들이 바로 재생되는 embed 형태로 만들어주지 못하는 점 이었습니다.

 

그래서 유료 모듈인 에디터자동완성 모듈을 구입하게 되었습니다.

이 모듈에서 글 작성 시 링크를 입력하면 iframely 사이트에서 완성해주는 모습으로 사이트에 html 소스로 직접 넣어주는 방식입니다. 장점은 글 작성 시 한번만 변환하여 작성하면 이후 글 읽을때는 아무 것도 하지 않고 바로 보인다는 점입니다.

 

 

그런데 iframely 에서 제공하는 것 중 트위터 등의 embed 형태가 제대로 제공되지 않고 일반적인 섬네일 + 정보로 제공된다는 점입니다.

 

그래서 결국 이 두 자료를 혼용하기로 했습니다.

 

 

 

tw.png

 

에디터자동완성모듈에서 만들어주지 못하고 임베드파싱 모듈에서  만들어주는 결과물입니다.

 

 

 

 

 

 

 

 

 

 

 

kaka.png

반대로 임베드파싱 모듈에서는 만들어주지 못하고 에디터자동완성 모듈에서 만들어주는 결과물입니다.

 

 

이렇게 사이트에서 바로 재생할 수 있는 embed  형태로 할 수 있는 케이스가 달라 두가지를 혼용해서 사용하게 작업을 했는데 두가지를 쓰게 되면 문제가 글 읽을때 이미 embed 형태로 삽입된 소스에도 추가로 변환된 모습이 또 보이게 되는 중복현상이 발생합니다.

 

 

 

이것을 막기 위해

자동완성모듈의 설정에서 

twitter.com
instagram.com
facebook.com

 

위 세 도메인은 작동하지 않도록 하고

 

반대로 임베드파싱 모듈에서는 위 세 도메인만 동작하도록 했습니다.

 

 

 

 

여기서 어려움이 발생합니다.

분명 임베드파싱 모듈의 예외도메인 처리를 하는 설정이 있습니다.

이것이 동작을 하지 않더군요. 이게 되어야 반대로 처리해서 등록된 도메인만 동작되도록 해야 하는데 말이죠..

 

 

코드를 잘 보니 설정 입력에는 엔터로 구분하라고 되어 있지만 실제 코드에서는 콤마(,)로 구분된 것을 발견했습니다.

 

twitter.com,instagram.com,facebook.com

이렇게 하니 이 세가지 도메인만 정확히 동작을 안하더군요! 

 

 

js에서 거꾸로 이 세가지 도메인만 동작하도록 간단하게 바꾸고 완성!!!

 

 

 

웹사이트에서 유통되는 컨텐츠의 추세가 짧은 영상과 같은 것들이 인기가 많아 보여 이부분에 신경을 많이 써서 작업을 해보았습니다.

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • ?
    꿀팁 감사합니다
  • ?
    임베드파싱 모듈에서 파싱 예외 도메인를 허용으로 바꾸는 방법 알 수 있을까요?
    이렇게 저렇게 해봤지만 실패했네요ㅠ