최근 개설한 커뮤니티 사이트에 외부에서 배포되는 영상들을 공유하기 쉽도록 외부의 영상들(유튜브,카카오tv,네이버tv 등...) 사이트에서 영상을 바로 재생할 수 있도록 해보려고 했습니다.
우선 배포된 임베드파싱 모듈 과 유료 자료인 에디터자동완성 모듈 두가지 중 하나를 선택하게 됩니다.
두가지 모두 만족하지 못하는 지점이 발생합니다.
제가 임베드파싱모듈로(글 읽을 때 변환하여 보여주는 방식) 제공했을때 아쉬운 점이 최근에 방송사들이 방송직후 배포하는 짧은 영상들이 유튜브가 아닌 경우가 많아졌다는 점인데 이러한 영상들이 바로 재생되는 embed 형태로 만들어주지 못하는 점 이었습니다.
그래서 유료 모듈인 에디터자동완성 모듈을 구입하게 되었습니다.
이 모듈에서 글 작성 시 링크를 입력하면 iframely 사이트에서 완성해주는 모습으로 사이트에 html 소스로 직접 넣어주는 방식입니다. 장점은 글 작성 시 한번만 변환하여 작성하면 이후 글 읽을때는 아무 것도 하지 않고 바로 보인다는 점입니다.
그런데 iframely 에서 제공하는 것 중 트위터 등의 embed 형태가 제대로 제공되지 않고 일반적인 섬네일 + 정보로 제공된다는 점입니다.
그래서 결국 이 두 자료를 혼용하기로 했습니다.
에디터자동완성모듈에서 만들어주지 못하고 임베드파싱 모듈에서 만들어주는 결과물입니다.
반대로 임베드파싱 모듈에서는 만들어주지 못하고 에디터자동완성 모듈에서 만들어주는 결과물입니다.
이렇게 사이트에서 바로 재생할 수 있는 embed 형태로 할 수 있는 케이스가 달라 두가지를 혼용해서 사용하게 작업을 했는데 두가지를 쓰게 되면 문제가 글 읽을때 이미 embed 형태로 삽입된 소스에도 추가로 변환된 모습이 또 보이게 되는 중복현상이 발생합니다.
이것을 막기 위해
자동완성모듈의 설정에서
twitter.com
instagram.com
facebook.com
위 세 도메인은 작동하지 않도록 하고
반대로 임베드파싱 모듈에서는 위 세 도메인만 동작하도록 했습니다.
여기서 어려움이 발생합니다.
분명 임베드파싱 모듈의 예외도메인 처리를 하는 설정이 있습니다.
이것이 동작을 하지 않더군요. 이게 되어야 반대로 처리해서 등록된 도메인만 동작되도록 해야 하는데 말이죠..
코드를 잘 보니 설정 입력에는 엔터로 구분하라고 되어 있지만 실제 코드에서는 콤마(,)로 구분된 것을 발견했습니다.
twitter.com,instagram.com,facebook.com
이렇게 하니 이 세가지 도메인만 정확히 동작을 안하더군요!
js에서 거꾸로 이 세가지 도메인만 동작하도록 간단하게 바꾸고 완성!!!
웹사이트에서 유통되는 컨텐츠의 추세가 짧은 영상과 같은 것들이 인기가 많아 보여 이부분에 신경을 많이 써서 작업을 해보았습니다.
XE타운 웹지기님 글
이어서 방법
일단 링크 파싱 모듈을 사용하면서 제가 필요한거만 허용하려고 해서 이것저것 뒤져보고 있었습니다.
일단 파싱 예외 도메인 엔터를 하면 예외 목록이 작동안하는거 수정했습니다.
parserlink.controller.php 파일의 53번째 줄
, 안적혀있어서 다중 예외 도메인이 적용 안되는거였습니다.
테스트 결과 정상적으로 작동한걸 확인했지만 제가 잘못한건지 잘한건지 모르겠네요.
일단 이게 중요한건 아니구요.
modules/parserlink/tpl/js/ap_parser.js
파일을 열고나서
그리고 37번 라인을
if (_exp == false) 로 바꿔 보세요.
즉 이런 두가지 형식이면
파싱 예외 도메인 부분이 파싱 허용 도메인 으로 바뀝니다.
만약 저 처럼 이런 기능이 필요하신 분은 수정하셔서 사용하시면 될거같습니다.
파싱모듈이 불필요한 링크, 링크처리된 링크를 파싱할때 오류를 일으켜 서버에 부하되는 경우가 많습니다.
그래서 찾고 있었는데 결국은 수정했네요, 도움주신 웹지기님에게 감사를 드립니다.
XE타운 웹지기님, 라그릿님 글
'작업 소스들' 카테고리의 다른 글
가로메뉴 만들기 및 스크롤 지우기 (0) | 2020.12.31 |
---|---|
PC, 모바일 화면 스크롤시 상단 고정 팁 (0) | 2020.08.11 |
웹의 구성을 재미있게 해주는 HTML / CSS 효과들 (0) | 2020.07.30 |
div 내 문자 넘어가는 부분 자르는 방법 (0) | 2020.07.24 |
웹사이트 배경으로 활용 가능한 영상을 큐레이션 해주는 ‘Coverr’ (0) | 2020.07.16 |