facebook.com 및 기타 사이트의 동영상 임베딩 실패

회원 중 한 명이 이 Facebook 링크를 단독으로 게시했는데, Discourse가 이를 파싱하려 했지만 실패했습니다.

같은 링크를 단독 줄로 시도해 보겠습니다:

위에서 보지 못하신 경우를 대비해, 이렇게 표시됩니다:

이 문제는 회원들이 링크를 공유하려 했던 몇몇 성인 사이트에서도 발생합니다. 여러 주요 성인 사이트의 다양한 비디오 URL을 붙여넣어 간단히 테스트해 보았는데, 이 사이트들도 작동하지 않았습니다.

이것은 Facebook 임베드에만 영향을 미친다는 점에서 비교적 심각한 버그인 것 같습니다. (기술에 익숙지 않은) 회원들은 Facebook이 매우 인기 있고 보편적이기 때문에 Facebook의 링크를 공유하는 것을 좋아합니다. :frowning: 게다가, 누군가 그 URL을 메시지에 게시하면 작동하지 않는 무엇으로 파싱되어 원래 URL이 사라집니다. 따라서 원해도 그 URL로 이동할 수 없게 되며… 더 이상 접근할 수조차 없습니다.

그러면… Discourse가 해당 도메인에서 비디오를 자동 임베드하지 않도록 설정할 수 있을까요? '이 단어들이 포함된 URL은 미디어 임베드에서 차단’과 같은 설정을 찾고 있었는데, 거기서 해당 도메인을 추가할 수 있으면 좋겠습니다. (또는 YouTube와 Vimeo와 같이 승인된 URL의 화이트리스트를 만들어 새로운 사이트로 인한 향후 문제를 사전에 방지하는 것도 좋습니다.)

그렇지 않다면, 제 포럼에서 도움을 줄 수 있는 빠른 해결책이 있을까요?

Firefox (데스크톱)

여기 데스크톱에서 Mac에서 Firefox 75를 사용하는데… 회색 실패 상자가 표시됩니다.

Safari (데스크톱)

Safari에서는 비디오의 첫 번째 프레임은 표시되지만, “재생” 버튼을 클릭해도 아무 반응이 없습니다.

Chrome (데스크톱)

Mac 데스크톱에서 Chrome v81을 사용 중입니다… 같은 증상이 나타납니다… 비디오는 보이지만 재생되지 않습니다.

iPhone - Safari iOS

Chrome나 Safari(데스크톱)와 동일하게… 비디오는 표시되지만 재생되지 않습니다.

Discourse는 공식적으로 Facebook 비디오를 onebox로 지원하지 않습니다.

아래 링크를 참고해 보세요:

2개의 좋아요

원박스 출력을 대체해서 깨진 플레이어(재생기)가 생성되지 않도록 할 수 있을까요? 이전처럼 동작하도록 해야 할 것 같습니다.

3개의 좋아요

네, 그것이 매우 중요하다고 생각합니다. Discourse가 Facebook 비디오를 지원하지 않는다는 것은 제게 큰 문제가 아닙니다. 하지만 회원이 링크를 붙여넣은(이것은 전혀 드문 일이 아닙니다) 후 오류 메시지가 표시되고… 원래 링크가 사라지는 것은 제게 큰 문제입니다. 현재 제 포럼에는 이와 유사한 메시지가 여러 건 있습니다. 관리자들은 이런 문제를 발견할 때마다 수동으로 수정하고 있지만, 당연히 이는 좋은 해결책이 아닙니다.

이것은 심각한 버그라고 생각합니다. 다만 Facebook(그리고 제가 테스트해 본 다른 비디오 사이트들)이 매우 인기 있다는 점이 그 이유입니다.

빠른 해결책을 찾고 싶습니다… 도움이 될 수 있다면 알려 주세요.

4개의 좋아요

여기서 가장 빠른 해결책은 onebox domains blacklist 설정에 www.facebook.com을 추가하는 것입니다. 이렇게 하면 onebox가 facebook.com 비디오를 임베드하려 하지 않습니다.

3개의 좋아요

여기서 변경된 사항은 Facebook이 OpenGraph 메타데이터를 업데이트하여 너무 제한적인 비디오 링크를 추가했다는 점입니다:

<meta property="og:video:secure_url" content="https://video.fjai1-2.fna.fbcdn.net/v/t42.9040-2/10000000_626864624535070_4779621138076532736_n.mp4?_nc_cat=107&amp;_nc_sid=985c63&amp;efg=eyJybHIiOjM1MiwicmxhIjoxMzI5LCJ2ZW5jb2RlX3RhZyI6InN2ZV9zZCJ9&amp;_nc_oc=AQkUihmrvyg1wU9qH_NjqkLUzl0XSYJGE6JREtPH7jxKc1aXEIuGLSbauCEPM-hI-DCuJRacr1hCB6HHZre1lxto&amp;rl=352&amp;vabr=196&amp;_nc_ht=video.fjai1-2.fna&amp;oh=3fd1d5e14f27d55bc0d2a91d4714148b&amp;oe=5EA6E533" />

위 비디오 링크는 Bad URL timestamp 오류를 표시합니다. :man_facepalming:

og:image 태그의 링크도 동일한 오류를 표시합니다.

Facebook 원박스(onebox)에 표시할 수 있는 정보는 비디오 제목뿐입니다. Facebook 비디오 링크를 블랙리스트에 추가하도록 원박스를 하드코딩해야 한다고 생각합니다.

6개의 좋아요

훌륭합니다, 감사합니다… 완벽합니다.

참고로 Facebook 외에도 다른 사이트에서도 이런 문제가 발생합니다. 한 회원이 xvideos.com의 비디오 페이지 링크를 게시하려고 했는데 이 또한 실패했습니다. (NSFW 경고! 이 사이트는 확실히 성인 사이트입니다!) 몇몇 다른 사이트로 테스트해 보았지만 동일한 결과를 확인했습니다.

1개의 좋아요

페이스북의 경우, twitter:player 속성을 가져와서 iframe에 사용할 수 있을까요? 만료되지 않는 URL인 것 같습니다:

Screenshot 2020-04-27 at 12.26.42

(페이스북이 깨진 opengraph 데이터를 제공하면서도, 제대로 작동하는 twitter 데이터를 제공하는 것은 정말 아이러니합니다 :joy:)

또는 대안으로, 인스타그램과 동일한 로직을 적용하는 것도 방법입니다. 재생 버튼(:play_or_pause_button:)이 있는 큰 썸네일을 표시하고, 이 버튼에 링크를 연결하는 방식입니다.

4개의 좋아요

그 방법을 시도해 봤는데 twitter:image와 twitter:player 태그에서 깨진 링크가 발생했어요. 당신에게는 정상적으로 작동하나요?

1개의 좋아요

@pnoeric의 예시 영상에서

<meta name="twitter:player" content="https://www.facebook.com/plugins/video.php?height=222&width=400&href=https://www.facebook.com/dccarmen/videos/10222567743521148/">

이 정상적으로 작동하는 것 같습니다.

하지만 오류가 있는 경우가 발견되었다면, 사용을 피하는 것이 좋겠습니다

1개의 좋아요

같은 링크에서 이렇게 보입니다:

https://www.facebook.com/plugins/video.php?height=222&amp;width=400&amp;href=https://www.facebook.com/dccarmen/videos/10222567743521148/

URL을 깨뜨리는 &amp;를 주목해 주세요… 이를 &로 변경하면 해결됩니다. 네, 우회할 수 있습니다.

twitter:image 링크는 여전히 깨져 있습니다(여기 예시 있음).

따라서 두 가지 옵션이 있습니다:

  1. twitter:player 링크를 사용하여 Facebook 비디오를 임베드
  2. onebox에서 Facebook 비디오를 블랙리스트에 등록하여 일반 링크로 표시

@codinghorror님은 어느 쪽을 선호하시나요?

3개의 좋아요

이 방법을 시도해 볼 수 있지만, 링크가 만료되지 않는지 확신할 수 있을까요?

href 파라미터에 전달하는 비디오 링크에 대해 해당 비디오를 임베드하는 Facebook 플러그인을 가리키는 URL이기 때문에 링크가 만료되지 않을 것 같습니다.

https://www.facebook.com/plugins/video.php?height=222&width=400&href=https://www.facebook.com/dccarmen/videos/10222567743521148/

따라서 iframe을 사용하여 Facebook 비디오를 임베드할 수 있습니다.

1개의 좋아요

아니요, 이 수정은 Facebook에 특화되어 적용됩니다.

실패하는 비디오 원박스(Onebox)는 일반적으로 임베드하려는 사이트 자체에 오류가 있음을 나타냅니다. Facebook의 경우, Facebook이 지나치게 제한적으로 설정되어 특정 시간에만 비디오 재생을 허용하고 있었기 때문입니다.

보통은 매우 인기 있는 사이트(예: Instagram)에 대해서만 이러한 오류를 우회하는 방법을 제공하여 더 넓은 커뮤니티가 혜택을 볼 수 있도록 합니다. 만약 해당 사이트가 인기 없고 사이트에 임베드해야 한다면, 해당 사이트를 위한 커스텀 원박스 엔진을 추가하는 커스텀 플러그인을 만드는 것이 권장되는 방법입니다.

2개의 좋아요

알겠습니다.

음. 원박스(onebox)가 임베드를 시도할 도메인을 화이트리스트로 지정할 수 있는 방법이 있을까요? 만약 없다면, 현재 이런 상황이 됩니다:

  1. 커뮤니티 포럼을 운영 중인데, 회원들이 영상 사이트 링크를 공유하는 것을 좋아합니다. (물론 어떤 사이트든 될 수 있겠죠… 지금은 알 수 없으니까요.)

  2. 만약 해당 사이트의 코드에 오류가 있어 임베드가 작동하지 않으면, Discourse가 임베드를 망가뜨려(보기 흉하게) 표시할 뿐만 아니라, 더 나쁜 것은 원래 URL을 제거하여 다른 사람들이 OP(첫 번째 게시자)가 공유하려 했던 것이 무엇이었는지 볼 수 없게 만듭니다.

2단계가 "만약 해당 사이트의 코드에 오류가 있어 임베드가 작동하지 않으면, Discourse가 임베드를 시도하는 것을 중단하고 대신 링크를 그대로 통과시켜야 하지 않나요?"라고 바뀌어야 하는 것 아닌가요?

이것은 블랙리스트로 해결할 수 없습니다. 이 문제로 영향을 받는 도메인이 무엇인지 알 수 없기 때문이죠. 그리고 물론, 미래에는 어떤 사이트든 이 문제가 생길 수 있습니다. 여기에서 Facebook에서 봤던 것처럼요.

물론 수정할 수 있습니다 — 문제가 발생하는 도메인을 블랙리스트에 추가하기만 하면 됩니다. 불가능한 일은 아닙니다.

2개의 좋아요

네, 괜찮습니다. 이 문제가 얼마나 큰지 정확히 파악하기가 어렵습니다. 이런 문제가 있는 도메인이 많지 않다면 수동으로 처리하는 것이 훌륭한 해결책이죠.

그래도 저는 Discourse가 잘못된 외부 데이터를 더 우아하게 처리해야 한다고 생각합니다. "거대한 오류 메시지를 생성하고 OP 게시글에서 가장 중요한 내용을 삭제한다"는 방식 말고요. :slight_smile: 아마 당신도 그렇게 생각하실 겁니다. 하지만 지금은 블랙리스트 등록이 허용할 만한 임시 해결책입니다. 감사합니다.

2개의 좋아요