Vimeo嵌入URL在邮件中解析错误

Nacho_Caballero · 2022 年6 月 24 日 17:56

Vimeo 提供两种类型的网址：直接链接（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 日 08:04

我们可以采用一些特殊的方法来修改电子邮件处理的重新映射方式，以便进行清理。

目前，我将为其添加一个 pr-welcome 标签，如果此问题再次出现几次，我们将考虑进一步的优先级排序。

Nacho_Caballero · 2022 年6 月 27 日 10:07

谢谢你，Sam。在不将其隐藏在 [details] 标签中的情况下，你有什么临时的解决方法可以防止人们在电子邮件中看到 URL 吗？

sam · 2022 年6 月 28 日 06:20

老实说，除了也许强制在下方放置一个非 oneboxed 链接之外，我想不出太多变通方法？

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，是否最好使用 Vimeo API 获取嵌入的 src URL，而不是手动构建它？请参阅 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 不是标准类型时，它没有正确捕获 vimeo。因此，我相应地更改了正则表达式模式。

Nacho_Caballero · 2022 年10 月 31 日 07: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 日 08:49

我来总结一下：

Vimeo 网址有不同的格式，我们唯一的问题是电子邮件方面，对吗？
要复制这个，需要怎么做：
- 在主题中粘贴网址或 iframe（所有情况是什么）
- 它应该能在网页上正常工作，但如果通过电子邮件发送主题内容，就会变得棘手

Nacho_Caballero · 2022 年11 月 1 日 09:52

是的。您所做的正则表达式更改使得识别 iframe src URL（https://player.vimeo.com/video/508864124?h=fcbbcc92fa）成为可能，因此这不再是问题。问题出在发送的邮件上。

如果您粘贴纯网址（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?h=fcbbcc92fa，而不是：https://vimeo.com/508864124/fcbbcc92fa

ghassan · 2022 年11 月 6 日 09:32

由于我需要拥有一个高级账户才能在 Vimeo 上拥有未列出的视频，因此我仍然很难重现。

另外，我认为您上面提供的视频示例仅允许从特定域加载，您能否也允许我的沙盒实例加载它：https://discuss.gsgapp.io。

再说一遍，请说清楚，您不期望视频在电子邮件中播放，但您期望当人们点击视频位置时，他们会被重定向到正确的网址？我这么理解对吗？

Nacho_Caballero · 2022 年11 月 6 日 11:14

完成

正确

感谢您的帮助！

ghassan · 2022 年11 月 6 日 11:57

找到了问题：
所以发生的情况是，当您粘贴 vanilla 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

例如，如果您从浏览器检查开发工具/检查元素，当使用 vanilla 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>

所以注意到第二个输出中额外的 data-original-href="https://vimeo.com/508864124/fcbbcc92fa"，有人可能会猜测当使用 vanilla 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 ，您也可以在 https://discuss.gsgapp.io 尝试，我在那里 cherry-picked 了我的提交。

我亲自测试了 4 种情况：

粘贴公开视频的 vimeo 网址
粘贴未列出视频的 vimeo 网址
粘贴公开视频的 iframe vanilla
粘贴未列出视频的 iframe vanilla

在所有情况下，它都导致电子邮件生成正确的网址。

但无论如何，请尝试测试所有其他可能遇到的变体，最重要的是不要破坏其他东西。

我测试电子邮件模板的方式是给自己发送一条私信，然后检查电子邮件收件箱。（因为我在 https://discuss.gsgapp.io 注册了两个账户）

Nacho_Caballero · 2022 年11 月 7 日 10:25

谢谢！我也测试过了，它能正常工作

Nacho_Caballero · 2023 年4 月 19 日 12:16

测试：

j.jaffeux · 2024 年6 月 28 日 19: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在邮件中解析错误

相关话题