최근 개설한 커뮤니티 사이트에 외부에서 배포되는 영상들을 공유하기 쉽도록 외부의 영상들(유튜브,카카오tv,네이버tv 등...) 사이트에서 영상을 바로 재생할 수 있도록 해보려고 했습니다.
우선 배포된 임베드파싱 모듈 과 유료 자료인 에디터자동완성 모듈 두가지 중 하나를 선택하게 됩니다.
두가지 모두 만족하지 못하는 지점이 발생합니다.
제가 임베드파싱모듈로(글 읽을 때 변환하여 보여주는 방식) 제공했을때 아쉬운 점이 최근에 방송사들이 방송직후 배포하는 짧은 영상들이 유튜브가 아닌 경우가 많아졌다는 점인데 이러한 영상들이 바로 재생되는 embed 형태로 만들어주지 못하는 점 이었습니다.
그래서 유료 모듈인 에디터자동완성 모듈을 구입하게 되었습니다.
이 모듈에서 글 작성 시 링크를 입력하면 iframely 사이트에서 완성해주는 모습으로 사이트에 html 소스로 직접 넣어주는 방식입니다. 장점은 글 작성 시 한번만 변환하여 작성하면 이후 글 읽을때는 아무 것도 하지 않고 바로 보인다는 점입니다.
그런데 iframely 에서 제공하는 것 중 트위터 등의 embed 형태가 제대로 제공되지 않고 일반적인 섬네일 + 정보로 제공된다는 점입니다.
그래서 결국 이 두 자료를 혼용하기로 했습니다.
에디터자동완성모듈에서 만들어주지 못하고 임베드파싱 모듈에서 만들어주는 결과물입니다.
반대로 임베드파싱 모듈에서는 만들어주지 못하고 에디터자동완성 모듈에서 만들어주는 결과물입니다.
이렇게 사이트에서 바로 재생할 수 있는 embed 형태로 할 수 있는 케이스가 달라 두가지를 혼용해서 사용하게 작업을 했는데 두가지를 쓰게 되면 문제가 글 읽을때 이미 embed 형태로 삽입된 소스에도 추가로 변환된 모습이 또 보이게 되는 중복현상이 발생합니다.
이것을 막기 위해
자동완성모듈의 설정에서
twitter.com
instagram.com
facebook.com
위 세 도메인은 작동하지 않도록 하고
반대로 임베드파싱 모듈에서는 위 세 도메인만 동작하도록 했습니다.
여기서 어려움이 발생합니다.
분명 임베드파싱 모듈의 예외도메인 처리를 하는 설정이 있습니다.
이것이 동작을 하지 않더군요. 이게 되어야 반대로 처리해서 등록된 도메인만 동작되도록 해야 하는데 말이죠..
코드를 잘 보니 설정 입력에는 엔터로 구분하라고 되어 있지만 실제 코드에서는 콤마(,)로 구분된 것을 발견했습니다.
twitter.com,instagram.com,facebook.com
이렇게 하니 이 세가지 도메인만 정확히 동작을 안하더군요!
js에서 거꾸로 이 세가지 도메인만 동작하도록 간단하게 바꾸고 완성!!!
웹사이트에서 유통되는 컨텐츠의 추세가 짧은 영상과 같은 것들이 인기가 많아 보여 이부분에 신경을 많이 써서 작업을 해보았습니다.
