URL-адреса встраивания Vimeo некорректно обрабатываются в письмах

Внести вклад Ошибка
1

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>

  1. Когда это отправляется в виде уведомления по электронной почте, прямая ссылка отображается корректно, но iframe преобразуется в ссылку с неверным URL: https://vimeo.com/508864124?h=fcbbcc92fa вместо https://player.vimeo.com/video/508864124?h=fcbbcc92fa.

    Ещё хуже то, что если к URL для встраивания добавить (корректный) завершающий слэш, то в письме идентификатор видео удаляется: <iframe src="https://player.vimeo.com/video/508864124/?h=fcbbcc92fa" ...></iframe> превращается в https://vimeo.com/?h=fcbbcc92fa.

  2. Есть ли способ полностью обойти преобразование iframe в URL? Точно так же, как мы уже делаем с опросами, где отображается что-то вроде «Нажмите здесь, чтобы увидеть опрос».

2

Непростая задача, но у нас есть особые механизмы для корректировки процесса перекодирования (remap) подготовленных данных для email-рассылок — это, безусловно, можно улучшить.

Пока добавлю метку pr-welcome и пересмотрим приоритет, если эта проблема возникнет ещё несколько раз.

1 лайк
3

Спасибо, Сэм. Можешь ли ты придумать какие-либо временные обходные пути, чтобы люди не видели URL в письме, не скрывая его в теге [details]?

4

Честно говоря, я не могу придумать много обходных путей здесь, разве что, возможно, принудительно добавить не встраиваемую ссылку под ней?

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

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

1 лайк
5

@Nacho_Caballero Приведённый вами пример — видео с ограниченным доступом. У таких видео другая структура URL.

Кроме того, способ встраивания видео с ограниченным доступом отличается, как указано в запросе Vimeo: Use oEmbed with private videos – Vimeo Help Center

Я думаю, что обходной путь может заключаться в создании собственного кода встраивания, используя документацию выше.

@sam
Что касается Discourse, возможно, будет лучше использовать Vimeo API для получения 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 &amp; Headphones-2ZrWHtvSog4

6

Чтобы получить 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":"<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>","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, когда тип был нестандартным. Поэтому я изменил шаблон регулярного выражения соответствующим образом.

1 лайк
Vimeo oneboxes broken after 3.1.0.beta4
7

@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= на / при отправке письма).

8

Я пытаюсь вспомнить/резюмировать следующее:

Итак, чтобы прояснить ситуацию:

  • Существуют различные форматы URL-адресов Viemo; наша проблема касается только электронной почты, верно?
  • Чтобы воспроизвести это, нужно сделать следующее:
    • Вставить URL или iframe в тему (каковы все случаи этого)
    • Это должно работать как ожидалось в веб-версии, но если отправить письмо с содержимым темы, всё становится сложнее.
9

Да. Изменение в регулярном выражении, которое вы внесли, позволило распознавать URL-адреса в атрибуте src тега iframe (https://player.vimeo.com/video/508864124?h=fcbbcc92fa), так что это больше не является проблемой. Проблема возникает при отправке письма.

Если вы вставляете обычный URL-адрес (https://vimeo.com/508864124/fcbbcc92fa), проблем нет. Проблема возникает только с атрибутом src тега iframe (https://player.vimeo.com/video/508864124?h=fcbbcc92fa).

Сейчас это работает.

Да. В настоящее время URL-адрес в атрибуте src тега iframe (https://player.vimeo.com/video/508864124?h=fcbbcc92fa) преобразуется в: https://vimeo.com/508864124?h=fcbbcc92fa вместо: https://vimeo.com/508864124/fcbbcc92fa

10

Мне всё ещё сложно воспроизвести проблему, так как для воспроизведения невидимого видео на Vimeo нужен премиум-аккаунт.

Кроме того, я думаю, что приведённый вами пример видео разрешает загрузку только с определённых доменов. Не могли бы вы разрешить загрузку и для моего тестового экземпляра: https://discuss.gsgapp.io.

Ещё раз, чтобы быть абсолютно ясным: вы не ожидаете, что видео будет воспроизводиться в электронной почте, но ожидаете, что при клике на область видео пользователя перенаправит на правильный URL? Правильно ли я вас понял?

11

Готово :+1:

Верно :+1:

Спасибо за помощь!

12

Ага, проблема найдена:

Суть в том, что когда вы вставляете обычный код iframe, вы можете обойти механизм onebox. В этом случае результирующий код iframe не будет содержать атрибут data-original-href, который используется в шаблоне письма.

Когда атрибут data-original-href отсутствует, Discourse пытается угадать видео, беря всё, что идёт после последнего /. Очевидно, что это не работает для видео с ограниченным доступом (unlisted video).

Например, если вы откроете инструменты разработчика (Inspect Element) в браузере, то увидите, что результирующий 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" во втором варианте. Можно подумать, что если добавить этот атрибут при использовании обычного iframe, то всё заработает, но, скорее всего, нет, потому что Discourse не позволяет добавлять произвольные атрибуты.

13

Я думаю, что могу предложить решение. Убедившись, что оно будет работать для случаев, когда видео опубликовано/доступно публично, я обнаружил следующее нестандартное поведение Vimeo. Обычно все публичные видео следуют шаблону vimeo.com/{id}, однако ссылка будет работать, даже если после ID добавить слэш и любой текст, например: vimeo.com/{id}/что-либо.

Рассмотрите следующий пример:

  • https://vimeo.com/767548129/estgsetgset
  • https://vimeo.com/767548129/hey-discurse
  • https://vimeo.com/767548129 Обычный вариант

Все эти ссылки ведут на одно и то же видео, поэтому решение может заключаться в следующем: при формировании URL из атрибута src тега iframe использовать структуру vimeo.com/{то, что идет после первого слэша}/{значение из параметра h}. Это позволит обеспечить работу в обоих случаях.

14

Предлагаемое исправление: FIX: vimeo iframe url when data-original-href is missing by ghassanmas · Pull Request #18894 · discourse/discourse · GitHub. Вы также можете протестировать его на https://discuss.gsgapp.io, где я выбрал свой коммит.

Лично я проверил 4 случая:

  • вставка URL видео с Vimeo (публичное видео);
  • вставка URL видео с Vimeo (видео по ссылке);
  • вставка чистого iframe для публичного видео;
  • вставка чистого iframe для видео по ссылке.

Во всех случаях email генерировал правильный URL.

В любом случае, пожалуйста, протестируйте все возможные варианты, с которыми вы можете столкнуться, и, что самое главное, убедитесь, что это не ломает другие функции.

Способ тестирования шаблона электронной почты заключался в том, что я отправлял себе прямое сообщение, а затем проверял почтовый ящик. (Поскольку у меня две учетные записи, зарегистрированные на https://discuss.gsgapp.io).

2 лайка
15

Спасибо! Я тоже протестировал, и всё работает :+1:

16

тестирование:

18

Это уже слито