oembed 2.0.3 올렸습니다.

인스타그램 규칙을 뒤에 /p/가 붙은 경우로 한정했습니다.

그외에 정규식에 오류가 있던걸 수정했습니다.

더이상 tinypng에 반응을 안할겁니다.

--------------------------

oembed 2.0.2 올렸습니다.

gfycat 추가했습니다

tiktok 추가했습니다

codepen 추가했습니다

captionpics 추가했습니다

mp4, avi, wmv, mpeg, mpg 등의 확장자에 대해 추가했습니다

yql을 써서 안되던 사이트들은 룰을 다 제거했습니다

------------------

멀티미디어 썸네일 수정했습니다.

oembed 수정했습니다.

인스타그램, soundcloud, imgur group에 대한 지원을 추가했습니다

그리고 버그도 하나 잡았구요

-----------------------------------------------------

parserlink 모듈이면 다 될 줄 알았는데

게시판을 보다 보니까 parserlink 모듈에 좀 문제가 있더군요.

base64로 이미지를 db에 저장하는 통에 db 사이즈가 어마어마하게 커진다는...

이미지 저장하는 부분은 덜어내서 가볍게 만들었지만 

parserlink가 최선의 솔루션이 아닐지도 모른다는 생각에 

게시판에 추천된 다른 방법들도 알아봤습니다.

xe 코어에서는 oembed라는 애드온을 쓰고 있더군요.

근데 오랫동안 버젼업이 안되서 방치되고 있는 것 같았습니다.

받아서 써보니까 그냥 jquery.oembed.js를 랩핑한 수준이더군요.

jquery.oembed.js 최신 버젼을 쓰면 될 것 같았습니다.

최신 버젼을 적용했지만 oembed 자체가 CORS 때문에 전에 비해서

안되는 곳이 엄청 많아진 것 같았습니다.

parserlink 모듈이 일일이 서버하고 통신하는 이유를 알 것 같다는...

이놈의 CORS 때문에 너무 짜증나네요... 

그래서 네이버tv, 카카오tv, 네이버 audiocloud, imgur 등은

규칙을 일일히 손으로 추가했습니다.

유튜브, 페북, 트위터는 잘 되기 때문에 

parserlink 모듈보다는 처리하는 곳이 좀 더 많을겁니다.

제가 테스트해본 곳 이외에 어디가 되고 어디가 안되는지는 잘 몰라요.

jquery.oembed.js가 기본으로 잔뜩 규칙을 가지고 있기는 한데

이게 업데이트된지 5년은 지난거라... 지금은 안되는 곳이 엄청 많더라구요.

CORS 문제도 있고.. 야후가 문닫은 문제도 있고.. (yql인가 하는걸 쓰더군요)

뭐 일단 테스트해본 곳만으로 충분할거란 생각은 드는데..

더 필요하심 말씀하세요.

그리고 parserlink하곤 다르게 서버 통신을 안하므로 매우 가볍구요.

그리고 추가적으로 그냥 이미지 링크를 붙여넣었을때도

처리했습니다.

 

https://xetown.com/files/attach/images/1089589/401/610/001/ed99fae067d99c80a9716987e420763d.jpg

 

이런 식으로 이미지 링크만 붙여넣으면 이미지가 나오는거지요.

이렇게 하면 외부 이미지 쓰기 되게 좋은데 왜 이걸 진작에 안지원해줬을까요..

 

그리고 겸사겸사 링크만 붙여넣어도 썸네일도 만들 수 있도록 했습니다.

기존에 멀티미디어 썸네일이라는 훌륭한 자료가 있었습니다만

이 애드온은 링크만으로는 처리가 안되고 iframe으로 붙여넣은 것만

썸네일을 만들어주더군요. (그리고 치명적인 버그도 하나 있더군요..)

그래서 약간? 수정해서 링크만 붙여넣어도 썸네일 만들어지도록 수정했습니다.

그리고 <img> 태그가 없이 이미지 링크만 붙여넣어도

썸네일 만들어지도록 했구요.

다만 링크만 붙여넣었을때 썸네일을 만드는 외부 서비스는 아직 유튜브뿐입니다.

네이버TV 카카오TV도 할려고 했는데 이건 썸네일 URL이 직관적으로 구해지질 않더라구요.

저쪽 서버하고 oembed 통신을 해야만 하는거라서...

이건 나중에 할려고 합니다. 버젼업되면 올려드릴께요.

 

하여튼 이 애드온 2개만 있으면 충분할 것 같습니다.

혹시 문제 있거나 처리를 추가하고 싶은 사이트가 있으면 댓글 남겨주세요.

그리고 oembed 처리는 parserlink 모듈을 안통해도 될 것 같지만

그래도 링크에 걸린 사이트 정보 미리 보는건 여전히 훌륭한 기능 같습니다.

저는 parserlink 모듈도 삼위일체로 함께 쓰려고 합니다. 

아참 parserlink 모듈은 현재 버젼 그냥 쓰시면 oembed와는 기능적으로 겹칩니다.

같이 쓰시려면 parserlink 모듈은 수정해야만 해요.

가능하면 이 3개의 분산된 기능을 하나로 합쳐서 모듈 하나로 만들까 하는데...

그렇게 해도 괜찮을지 모르겠습니다.

GPLv2라.. 제가 멋대로 수정하고 버젼도 올리긴 했습니다만..

아예 서로 다른 프로젝트끼리 합쳐버리면 좀 곤란할 것 같긴 한데요...

  • profile
    1등!! ㅎㅎ
    올려주신 파일 2개를 애드온에 넣으면 될까요?
    parserlink 모듈을 쓰고 있는데 같이 써도 무방한가요?
  • profile ?
    현재 배포되어 있는 parserlink와 oembed는 같이 사용할 수 없습니다.
    정확히는 사용하면 서로 따로따로 동작해서 유튜브가 2개씩 나오고 뭐 그럴겁니다 아마...
  • profile
    참고로 압축 풀면 폴더명이 이렇게 되는데
    multimedia_thumbnail.3.0
    oembed.2.0.1

    뒤에 버전 숫자를 지워야 됩니다.
    multimedia_thumbnail
    oembed
  • profile
    유튜브 링크를 남겨도 썸네일이 생성이 안됩니다.
    스케치북 (웹진형) 입니다.
  • profile ?
    주소 좀 알려주세요
  • profile ?
    의심되는 부분을 수정했는데 한번 해보시고 여전히 안되시면 주소 좀 알려주세요
  • ? profile
    parserlink 모듈과 함께 사용해서 그런것 같기도 합니다.
    다시 해보구 오겠습니다.
  • ?
    bb!!! 썸네일 관련해서 유료 자료를 쓰고 있었는데 필요가 없어졌습니다.~
  • ?
    버그 리포트 하나 합니다. 댓글에 링크가 포함된 댓글 회신시 js 에러가 나며 에디터를 불러 오지 못하네요
    TypeError: undefined is not an object (evaluating 'settings.apikeys[embedProvider.name]')
    아래 라인 이라고 합니다.
    if (embedProvider.apikey) {
    src = src.replace('_APIKEY_', settings.apikeys[embedProvider.name])
    }
  • ?
    API 키를 입력 할 이유가 없어 보여 그냥 해당 부분 지워 버리니까 잘 동작 하는 것 같은데
    다른 어떤 문제점이 있는지는 개발자가 아니라 확실하진 않습니다.
  • ? ?
    지금 소스를 살펴보니까 apikey를 필수로 요구하는 링크 타입은 딱 하나 아마존 뿐이네요.
    혹시 아마존 관련 링크이셨나요?
    아마존 링크가 있어서 oembed 처리를 할려고 했는데 apikey가 셋팅이 안되어 있으니까 에러가 난 것 같습니다. 말씀하신대로 apikey가 없이도 아마존 링크가 잘 처리된다면 구지 apikey를 요구할 필요 자체가 없겠죠. 이 부분은 제가 수정해놓겠습니다. 어차피 apikey를 쓰는 링크가 아마존 하나뿐이니 수정하신 것처럼 replace 하는 코드 자체를 삭제하더라도 실사용에는 전혀 차이는 없을 것으로 보입니다. 그냥 쓰시다가 나중에 새버젼으로 교체하셔도 무방할 듯 싶습니다.
    아마존 링크가 아니었다면 제가 좀 상세히 체크할 수 있게 링크를 부탁드립니다.
  • ? ?
    네. 멎습니다. 아마존 링크 였습니다. 삭제해야 보이기는 한데
    다만 키가 있으면 다르게 표현 되는지 등,..키값이 부여된 경우 뭐가 달라지는지는 잘 모르겠습니다
  • ? ?
    새로 올린 버젼에선 APIKEY가 있으면 집어넣고 없으면 안집어넣게 수정했습니다.
  • profile
    감사합니다~
    혹시 트위치도 지원이 가능한가요?
  • profile ?
    담번 버젼업때 포함시키겠습니다
  • profile
    훌륭한 자료감사합니다
  • profile
    자료 공유 감사드려요 ^^
  • profile
    훌륭한 자료 감사합니다. 한번 적용해보겠습니다!
  • ?
    eBay 가 제대로 동작 하지 않는 것 같습니다.
    단비아빠님 홈페이지에서도 테스트 댓글 남겨 두었습니다.
  • ? ?
    이베이는 서비스 자체를 중단했네요..
    togo라고 해서 플래시로 구현된 서비스가 있었나본데 지금은 사라졌습니다.
    대체할만한 다른게 나오지도 않았네요... 룰은 삭제하겠습니다.
  • ? ?
    네, 가장 많이 상요하는 인스타 그램도 조치를 좀 취해야 할 것 같습니다.

    instagram.com/xxxx 라는 계정 주소는 불러올 게시물이 없어서 그런지
    빈 화면만 보여주는 상황입니다.

    인스타 게시물 실제 공유 형태의 게시물 번호가 있는 경우에만 동작 하게 해야 할 듯 하네요
    무조건 Instagram.com/p/xxxx 형태로 이뤄지는듯 한데 제가 인스타를 하지 않아 확실하진 않습니다
  • ? ?
    이유를 모르겠지만 https://tinypng.com 에 반응을 하고 깨진 이미지를 출력 합니다.
  • ?
    단비아빠님

    섬네일 생성 애드온의 경우 seo 관련
    og image 로 인식이 되지 않는 것 같습니다.
  • ? ?
    음.. 썸네일 이미지를 본문에다가 <img>태그로 끼워넣는 방식이라서 그런가본데요...
    근데 이게 썸네일 이미지 파일을 딱히 다운로드 받거나 생성하거나 그런게 아니라 구글에 있는 썸네일 이미지에 링크만 거는거라서... 첨부파일로 넣을 수는 없습니다... 고치려면 seo쪽에서 고쳐야 할 것 같은데 이게 모듈에서 건드릴 수 있는 영역인지... 한번 체크해보겠습니다.
  • ? ?
    네. 이런 경우 서드파티에서 사용 가능한 함수들이 있다고 하네요
    https://github.com/rhymix/rhymix/issues/1880
    https://xetown.com/questions/1654262#comment_1654282
  • profile
    감사합니다. 만들려면 애먹어야 했는데 좋은 자료 감사합니다!
  • profile
    댓글은 적용이 안되던데 댓글 쪽에도 적용하려면 어떻게 하면 되나요..
  • profile ?
    댓글에도 css클래스를 주시면 될겁니다.. 아마 이름이 xe_content였던가..
  • ? profile
    댓글에도 그렇게 적용했는데 아예 둘다 안나오는거 같더라구요
  • profile
    안녕하세요.
    oembed를 너무 잘 사용하고 있는데.. https://youtu.be와 같이 짧은 유튜브 동영상은 자동출력이 되지 않고 텍스트만 나오네요.. 저만 그런건지 잘 모르겠습니다만 코드를 따로 만져줘야 할까요...
    답변 미리 감사드립니다.
  • profile ?
    음.. youtu.be 주소가 어떤 모양새인가요? 안되는 주소를 풀로 여기에 댓글로 달아주세요
  • ? profile
    https://youtu.be/lCXqNCd0m10
    youtu.be로 시작하는 모든것들이 다 자동출력이 안되고 텍스트만 출력 됩니다.
    ssl 관련된 문제라고 본것 같은데, 더 근본적인 해결책이 있을까요?
  • profile
    아마 youtu.be 링크가 shortURLList에 등록된 url이라서,
    api.longurl.org/v2/expand 이게 안 먹혀서
    먼저 등록된 해당 youtu.be를 삭제하고,

    아랫쪽에도 보면
    new $.fn.oembed.OEmbedProvider("youtube", "video", ["youtube\\.com/watch.+v=[\\w-]+&?", "youtu\\.be/[\\w-]+", "youtube.com/embed"], '//www.youtube.com/embed/$1?wmode=transparent', {
    templateRegex: /.*(?:v\=|be\/|embed\/)([\w\-]+)&?.*/,
    embedtag: {tag: 'iframe', width: '560', height: '315'}, autoplay: "&autoplay=1"
    }),
    이 부분이 있는데,

    일단 예전 글 보면 여기까지 작업안해도 된다고 했는데,
    저기까지 적용하고 좀 다른 점은 짧은주소는 rel="noopener" 이게 붙어버리고 iframe이 안뜨더군요.

    라이믹스 관리자에서도 시스템설정 에서 youtu.be/ 외부멀티미디어 허용으로 등록해놨구요.

    <a class="_oembed" href="https://youtu.be/sC-lE2FAimM" rel="noopener" target="_blank">https://youtu.be/sC-lE2FAimM</a>

    해당 글에 보면 짧은주소가 _oembed 클래스는 적용되는데 iframe만 안뜨더군요...orz
  • profile
    안녕하세요. 정말 잘 쓰고 있는 애드온입니다. 다시 한번 감사 드립니다.
    요새 유튜브 쇼츠가 인기인데, 유튜브 쇼츠도 적용되게 수정하실 계획이 있으신가요?