メール内のVimeo埋め込みURLが正しく解析されませんでした

Nacho_Caballero · 2022 年 6 月 24 日午後 5:56

Vimeo は 2 種類の URL を提供しています。ダイレクトリンク (https://vimeo.com/508864124/fcbbcc92fa) と埋め込みリンク (iframe で使用できますが、直接クリックしても機能しません) です。

例:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

通知メールで送信すると、ダイレクトリンクは正しく表示されますが、iframe は間違った URL のリンクに置き換えられます: https://vimeo.com/508864124?h=fcbbcc92fa (正しくは https://player.vimeo.com/video/508864124?h=fcbbcc92fa)

さらに悪いことに、埋め込み URL に (有効な) 末尾のスラッシュを追加すると、メールで動画 ID が削除されます: <iframe src="https://player.vimeo.com/video/508864124/?h=fcbbcc92fa" ...></iframe> が https://vimeo.com/?h=fcbbcc92fa になります。
iframe から URL への変換を完全にバイパスする方法はありますか? 投票で行っているように、「投票を表示するにはここをクリック」のような表示になるようにしたいのです。

sam · 2022 年 6 月 27 日午前 8:04

わかりました。メール処理の再マッピングを改善するための特別な処理がありますので、確実にクリーンアップできます。

現時点では #pr-welcome としておきます。これがさらに数回発生した場合は、優先順位を検討します。

Nacho_Caballero · 2022 年 6 月 27 日午前 10:07

サムさん、ありがとうございます。メールでURLを非表示にするために[details]タグを使わずに、URLが見えないようにする一時的な回避策はありますか？

sam · 2022 年 6 月 28 日午前 6:20

率直に言って、これを回避する方法はあまり思いつきません。せいぜい、その下にリンクを強制的に表示させるくらいでしょうか？

https://vimeo.com/185876954
<https://vimeo.com/185876954>

https://vimeo.com/185876954
https://vimeo.com/185876954

ghassan · 2022 年 6 月 29 日午前 11:38

@Nacho_Caballero 提供された非公開動画の例では、非公開動画は異なるURL構造を持っています。

また、Vimeoの要求に従って非公開動画を埋め込む方法は異なります。詳細は Use oEmbed with private videos – Vimeo Help Center を参照してください。

上記ドキュメントに従って、独自の埋め込みを作成するのが回避策になると思います。

@sam
Discourseに関しては、埋め込み用のsrc URLを構築するのではなく、Vimeo APIを使用して取得する方が良いのではないでしょうか。 https://stackoverflow.com/questions/51414260/vimeo-url-ive-never-seen-before-with-two-different-ids-how-do-i-get-it-to-work を参照してください。そして、関連する行は discourse/lib/onebox/engine/vimeo_onebox.rb at 657256a099a601a0694d11d15c42ad76988efe8c · discourse/discourse · GitHub です。

いずれにせよ、私の推測が正しければ、これは典型的な投稿だけでなく、メールにも影響するはずです: 1-Minute Audio Test for Stereo Speakers & Headphones-2ZrWHtvSog4

ghassan · 2022 年 6 月 29 日午前 11:47

iframeを取得するために、次のようにしました。

GET https://vimeo.com/api/oembed.json?url=https://vimeo.com/508864124/fcbbcc92fa
そして、次のような結果を得ました。

{"type":"video","version":"1.0","provider_name":"Vimeo","provider_url":"https:\/\/vimeo.com\/","html":"\u003ciframe src=\"https:\/\/player.vimeo.com\/video\/508864124?h=fcbbcc92fa\u0026amp;app_id=122963\" width=\"426\" height=\"240\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen\u003e\u003c\/iframe\u003e","width":426,"height":240,"domain_status_code":403,"video_id":508864124,"uri":"\/videos\/508864124:fcbbcc92fa"}

UTF-8デコードされたiframeは次のとおりです。

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

iframe自体

編集/更新：

修正のためにPRを提出しました。問題は正規表現パターンにあったと思います。標準タイプではない場合にVimeoを正しくキャプチャしていませんでした。そのため、正規表現パターンをそれに応じて変更しました。

Nacho_Caballero · 2022 年 10 月 31 日午前 7:23

@ghassan これがまだ問題になっていることに気づきました。

iframe に非公開の動画がある場合、メール内の URL が正しく変換されません。たとえば、次のようになります。

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

これは次のように変換されます（404 エラーになります）。https://vimeo.com/508864124?h=fcbbcc92fa

正しい URL の代わりに：https://vimeo.com/508864124/fcbbcc92fa

おそらく、PR に追加した正規表現では、追加の手順が必要になる可能性があります（メール送信時に ?h= を / に変換するなど）。

ghassan · 2022 年 11 月 1 日午前 8:49

要点を整理させてください。

viemoのURLにはいくつかのフォーマットがありますが、問題となっているのはメール送信時のことだけですよね？
これを再現するには、どうすればよいですか？
- トピックにURLまたはiframeを貼り付ける（これにはどのようなケースがありますか？）
- Web上では期待通りに動作しますが、トピックの内容をメールで送信すると問題が発生します。

Nacho_Caballero · 2022 年 11 月 1 日午前 9:52

はい。行った正規表現の変更により、iframeのsrc URL（https://player.vimeo.com/video/508864124?h=fcbbcc92fa）を認識できるようになり、それはもう問題ありません。問題は送信されるメールにあります。

プレーンなURL（https://vimeo.com/508864124/fcbbcc92fa）を貼り付けた場合は問題ありません。問題はiframeのsrc（https://player.vimeo.com/video/508864124?h=fcbbcc92fa）のみです。

現在、そのようになっています。

はい。現在、iframeのsrc（https://player.vimeo.com/video/508864124?h=fcbbcc92fa）は、https://vimeo.com/508864124/fcbbcc92faではなく、https://vimeo.com/508864124?h=fcbbcc92faに変換されてしまいます。

ghassan · 2022 年 11 月 6 日午前 9:32

Vimeoで非公開動画をアップロードするにはプレミアムアカウントが必要なため、私にはまだ再現が難しいです。

また、上記の動画の例では、特定のドメインからのみ読み込みが可能になっていると思いますが、私のサンドボックスインスタンスである https://discuss.gsgapp.io からも読み込めるようにしていただけますか？

改めて明確にしますが、Eメールで動画を再生することは期待しておらず、動画の位置をクリックしたときに正しいURLにリダイレクトされることを期待している、ということでよろしいでしょうか？

Nacho_Caballero · 2022 年 11 月 6 日午前 11:14

完了しました👍

正しいです👍

ご協力ありがとうございます！

ghassan · 2022 年 11 月 6 日午前 11:57

問題が判明しました。

つまり、バニラ（そのままの）iframeコードを貼り付けると、oneboxコードをバイパスする可能性があり、それをバイパスすると、結果のiframeコードに data-original-href が含まれなくなります。これは、メールテンプレートで使用されるリンクです。

data-original-href が欠落している場合、Discourseは動画を推測しようとしますが、それは最後の / の後の部分になり、もちろん非公開動画の場合はカバーされません。

github.com/discourse/discourse

lib/pretty_text.rb

dea44ec92


      
          def self.convert_vimeo_iframes(doc)
            doc.css("iframe[src*='player.vimeo.com']").each do |iframe|
              if iframe["data-original-href"].present?
                vimeo_url = UrlHelper.normalized_encode(iframe["data-original-href"])
              else
                vimeo_id = iframe['src'].split('/').last
                vimeo_url = "https://vimeo.com/#{vimeo_id}"
              end
              iframe.replace Nokogiri::HTML5.fragment("<p><a href='#{vimeo_url}'>#{vimeo_url}</a></p>")
            end
          end

たとえば、ブラウザの開発者ツール/要素の検査で確認すると、バニラiframeコードを使用したときの結果のiframeは次のようになります。

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

一方、URLのみを貼り付けてDiscourseにiframeに変換させる場合
https://vimeo.com/508864124/fcbbcc92fa。

<iframe class="vimeo-onebox" src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" data-original-href="https://vimeo.com/508864124/fcbbcc92fa" frameborder="0" allowfullscreen="" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>

2番目の出力に追加された data-original-href="https://vimeo.com/508864124/fcbbcc92fa" に注目してください。バニラiframeを使用した場合にその属性を追加すれば機能するのではないかと推測できますが、おそらくDiscourseは任意の属性を追加することを許可していないため、機能しません。

ghassan · 2022 年 11 月 6 日午後 12:11

解決策を提案できると思います。動画が公開されている場合に機能することを確認しながら、Vimeo のこの珍しい動作を見つけました。通常、公開されているすべての動画は vimeo.com/{id} というパターンに従いますが、スラッシュを追加すると機能します。つまり、vimeo.com/{id}/anything です。

次の例を検討してください。

https://vimeo.com/767548129/estgsetgset
https://vimeo.com/767548129/hey-discurse
https://vimeo.com/767548129 通常

上記すべてが同じ動画につながるため、修正は iframe の src から URL を作成することです。vimeo.com/{最初のスラッシュの後の部分}/{h=から取得するもの}。これにより、両方のケースで機能するはずです。

ghassan · 2022 年 11 月 6 日午後 12:47

提案された修正は FIX: vimeo iframe url when data-original-href is missing by ghassanmas · Pull Request #18894 · discourse/discourse · GitHub です。また、私のコミットを cherry-pick した https://discuss.gsgapp.io でも試すことができます。

個人的には4つのケースでテストしました。

公開動画のVimeo URLを貼り付け
非公開動画のVimeo URLを貼り付け
公開動画のiframe vanillaを貼り付け
非公開動画のiframe vanillaを貼り付け

すべてのケースで、メールが正しいURLを生成しました。

いずれにしても、遭遇する可能性のある他のすべてのバリエーションをテストし、最も重要なこととして、他のものを壊さないようにしてください。

メールテンプレートをテストした方法は、自分自身にダイレクトメッセージを送信し、メール受信トレイを確認することでした。（https://discuss.gsgapp.io/ に登録した2つのアカウントを持っているため）

Nacho_Caballero · 2022 年 11 月 7 日午前 10:25

ありがとうございます！テストしたところ、動作しました👍

Nacho_Caballero · 2023 年 4 月 19 日午後 12:16

テスト:

j.jaffeux · 2024 年 6 月 28 日午後 7:46

マージされました

トピック		返信	表示
Posted a vimeo link in Discourse and email notice gave wrong one Support	2	446	2022 年 7 月 15 日
Strange destructive behavior with Vimeo links Bug	2	511	2021 年 10 月 6 日
Need help, how I can embed Vimeo video? Support	5	3546	2017 年 9 月 27 日
Vimeo embedded player is no longer? Bug	4	662	2019 年 5 月 20 日
Video embeds from facebook.com and other sites fail Bug	25	5536	2020 年 5 月 6 日

メール内のVimeo埋め込みURLが正しく解析されませんでした

関連トピック