facebook.com やその他のサイトからの動画埋め込みが失敗する件

貢献 バグ
1

私のメンバーの一人が この Facebook リンクをスタンドアロンで投稿 したところ、Discourse がそれを解析しようとして失敗しました。

同じリンクを単独の行に置いて試してみます：

もし上に表示されていない場合は、以下に示す通りです：

image
image1180×926 16.7 KB

この問題は、いくつかのアダルトサイトでも同様に発生しています。メンバーがリンクを共有しようとした際、いくつかの主要なアダルトサイトからの動画 URL をいくつか貼り付けて簡易テストを行ったところ、それらも機能しませんでした。

これは比較的重篤なバグのように思われます。特に Facebook の埋め込みに影響を与える点です。私の（技術に詳しくない）メンバーは、Facebook が非常に人気があり普遍的であるため、Facebook のコンテンツへのリンクを共有したがる傾向があります。:frowning: さらに、誰かがその URL をメッセージに投稿すると、それが機能しない形式に解析されてしまい、元の URL は消えてしまいます。そのため、たとえその URL にアクセスしたいと思っても、もはや利用できません。

そこで質問ですが、Discourse に「特定のドメインでの動画の自動埋め込みを行わない」ように設定することは可能でしょうか？「メディア埋め込みから除外する URL に特定の単語を含むものをブラックリストに登録する」といった設定を探していました。そのドメインを追加できるようにしたいのです。（あるいは、YouTube や Vimeo のような承認された URL のホワイトリストを作成し、将来新しいサイトでの問題を防ぐ方法もあるかもしれません。）

それができない場合、フォーラム側で素早く対処できる方法はありますか？

2

Firefox（デスクトップ）

私のデスクトップでは、Mac で Firefox 75 を使用していますが、グレーの失敗ボックスが表示されます。

image
image1874×992 91.9 KB

3

Safari（デスクトップ）

Safari では、動画の最初のフレームが表示されますが、「再生」ボタンをクリックしても何も起こりません。

image
image1578×746 196 KB

Chrome（デスクトップ）

Mac デスクトップの Chrome v81 を使用しています…同じ現象です…動画は表示されますが、再生されません。

image
image1936×908 254 KB

4

iPhone - Safari iOS

Chrome や Safari（デスクトップ）と同じく、動画は表示されますが再生されません。

image
image1242×2688 475 KB

6

Discourse は Facebook 動画の Onebox 機能を公式には サポートしていません。

以下のリンクをご参照ください：

「いいね！」 2
7

onebox の出力を、壊れたプレーヤーが生成されないように置き換えることはできますか？おそらく、以前 のように動作するように修正すべきでしょう。

image
image1242×2208 366 KB

「いいね！」 3
8

はい、それは重要だと考えます。Discourse が Facebook 動画を公式にサポートしていなくても、私にとっては大きな問題ではありません。しかし、メンバーがリンクを貼り付ける（これは極めて一般的な行為です）際にエラーメッセージが表示され、元のリンクが失われてしまうのは、非常に深刻な問題です。 私のフォーラムには現在、このようなメッセージが複数寄せられています。管理者は問題が発生するたびに手動で修正を行っていますが、明らかにこれは最善の解決策ではありません。

これは、Facebook（および私がテストした他の動画サイト）が非常に広く利用されているという点において、重大なバグであると考えます。

何か素早い修正方法を見つけたいと考えています。お手伝いできることがあれば、お知らせください。

「いいね！」 4
9

ここでの最も簡単な解決策は、設定「onebox domains blacklist」に www.facebook.com を追加することです。そうすれば、onebox は facebook.com の動画を埋め込もうとしなくなります。

「いいね！」 3
10

ここで変更されたのは、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 の動画リンクをブラックリストに追加するように onebox をハードコーディングすべきだと思います。

「いいね！」 6
11

素晴らしい、ありがとうございます……完璧です。

余談ですが、これは Facebook 以外のサイトでも発生する点に注意してください。ある会員が xvideos.com の動画ページへのリンクを投稿しようとしたところ、同様に失敗しました（NSFW 注意！これは非常にアダルトなサイトです！）。他にもいくつかのサイトで試しましたが、同じ現象が発生しました。

「いいね！」 1
12

Facebook について、twitter:player 属性を iframe に使用することは可能でしょうか？どうやら、これは期限のない URL のようです。

Screenshot 2020-04-27 at 12.26.42

（Facebook が壊れた Open Graph データを提供している一方で、Twitter データは機能しているという、これほど皮肉なことはありません :joy:）

あるいは、Instagram と同じロジックを適用する方法もあります。大きなサムネイルに :play_or_pause_button: ボタンを表示し、それをリンク付きにします。

「いいね！」 4
13

試してみましたが、twitter:image と twitter:player タグのリンクが壊れていました。あなたには正常に動作しますか？

「いいね！」 1
14

@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
15

同じリンクについて、以下が表示されています：

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 リンクは依然として壊れています（例）。

そのため、以下の 2 つの選択肢があります：

  1. twitter:player リンクを使用して Facebook 動画を埋め込む
  2. Facebook 動画を onebox からブラックリスト化し、通常のリンクとして表示する

どちらがよろしいでしょうか、@codinghorror さん？

「いいね！」 3
16

試してみるのは可能ですが、リンクの有効期限が切れていないか確信がありますか？

17

リンクの有効期限が切れることはないと考えられます。URL は基本的に、href パラメータに渡された任意の動画リンクの動画を埋め込む Facebook プラグインを指しているためです。

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

したがって、iframe を使用して Facebook 動画を埋め込むことができます。

「いいね！」 1
20

いいえ、この修正は Facebook 固有のものになります。

なお、動画の Onebox が失敗する場合は、通常、埋め込もうとしているサイト側に問題があることを示しています。Facebook の場合、制限が厳しすぎて、動画の再生が一定時間のみ許可されていたことが原因でした。

私たちは通常、非常に人気のあるサイト（例：Instagram）に対してのみ、これらのエラーに対する回避策を講じており、より広いコミュニティがその恩恵を受けられるようにしています。サイトが人気がなく、自サイトで埋め込む必要がある場合は、そのサイト用のカスタム Onebox エンジンを追加するカスタムプラグインを作成するのが推奨方法です。

「いいね！」 2
21

了解しました。

ふむ、onebox が埋め込みを試みるドメインをホワイトリストで指定する方法はありますか？もしそれができないなら、以下のような状況になりますね。

  1. 私はコミュニティフォーラムを運営しており、メンバーは動画を含むサイトへのリンクを好んで貼ります（もちろん、それらのサイトは「あらゆるサイト」であり、現時点でどこかは分かりません）。

  2. サイト側のコードに問題があり埋め込みが機能しない場合、Discourse は埋め込みを壊してしまい（見苦しくなります）、さらに悪いことに、元の URL を削除してしまうため、他のユーザーが OP が共有しようとした内容を確認できなくなります。

ステップ 2 は「サイト側のコードに問題があり埋め込みが機能しない場合、Discourse は埋め込みを試みるのをやめ、代わりにリンクをそのまま通過させるべきではないでしょうか？」とするべきだと思いませんか？

ブラックリストでこの問題を解決することはできません。なぜなら、どのドメインが影響を受けているか分からないからです。もちろん、将来はどのサイトでもこの問題が発生する可能性があります。今回 Facebook で見られたようにです。

22

もちろん修正できます。問題が発生しているドメインをブラックリストに登録するだけです。これは不可能なことではありません。

「いいね！」 2
23

いいえ、問題ありません。これがどの程度の問題なのかは私にはよくわかりません。もしこの問題を抱えるドメインがそれほど多くないなら、手動で対応するのが素晴らしい解決策です。

それでも、Discourse は「巨大なエラーメッセージを作成し、OP の投稿から最も重要な内容を削除する」という方法ではなく、壊れた外部データをより graceful に処理すべきだと考えています。おそらくあなたもそうお考えでしょうね。:slight_smile: しかし現時点では、ブラックリスト化は許容できる回避策です。ありがとうございます。

「いいね！」 2