Загрузка видео на YouTube и Vimeo с использованием компонента темы

[ti0]

Этот новый компонент темы позволяет загружать видео из редактора Discourse на YouTube и Vimeo. Для тех, кто уже знаком с плагином, который я недавно разработал, та же функциональность теперь доступна в этом компоненте темы, который можно добавить к любой теме. Это значительно упрощает установку и работает точно так же, как плагин.

Возможности

Все участники форума могут загружать видео на Vimeo или YouTube (администраторы могут включить одну или обе опции).

Администраторы могут управлять видимостью и настройками встраивания видео, загруженных на Vimeo, используя параметры администратора.

Пользователи могут управлять видимостью видео, загруженных на YouTube, из окна загрузки.

Вы можете посмотреть демонстрацию плагина здесь (в компоненте всё то же самое, за исключением страницы настроек. Страница настроек компонента находится в разделе Администрирование > Настройка > Компоненты > Загрузка видео):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Настройка

Важно: Для компонентов темы необходимо убедиться, что компонент активирован для тем, используемых на вашем экземпляре (либо нажмите «Добавить все темы», либо выберите нужные темы).

Ниже приведены шаги по настройке разработчика для включения загрузки на YouTube и Vimeo. Если вы предпочитаете, чтобы это сделал кто-то другой, вы можете запросить поддержку, обратившись ко мне, @ti0.

Для загрузки на YouTube

Загрузки на YouTube идут на аккаунт загружающего, в отличие от загрузок на Vimeo, которые идут на общий аккаунт.

Посмотреть шаги

• Создайте аккаунт и проект на https://console.developers.google.com

• Включите YouTube Data API v3

• Настройте экран согласия OAuth для внешних пользователей (если только все пользователи вашего форума Discourse не принадлежат к одной Google-организации).

• Настройте свои учётные данные:

  • Создайте идентификатор клиента OAuth
  • Выберите тип приложения «Веб-приложение»
  • Добавьте URL вашего экземпляра Discourse в разделе «Авторизованные источники JavaScript»

• Скопируйте только сгенерированный идентификатор клиента

• Перейдите на страницу настроек компонента в администрировании Discourse и вставьте идентификатор клиента в поле youtube api client id.

• Включите загрузку на YouTube, активировав настройку: youtube upload enabled

• При необходимости измените параметры видимости по умолчанию для YouTube.

• Теперь вы должны иметь возможность загружать видео напрямую из редактора тем Discourse на YouTube.

Для загрузки на Vimeo

После настройки компонента по шагам ниже, все участники сообщества смогут загружать видео в ваш аккаунт Vimeo.

Вы несёте ответственность за ограничения и использование вашего аккаунта Vimeo.

Посмотреть шаги

• Создайте аккаунт и приложение на Vimeo Developers:
  https://developer.vimeo.com/apps/new

• Сгенерируйте токен доступа с правами на загрузку

• Перейдите на страницу настроек компонента в администрировании Discourse, добавьте сгенерированный токен доступа в настройку vimeo api access token и сохраните

• Включите загрузку на Vimeo, активировав настройку vimeo upload enabled.

• Настройте параметры видимости и встраивания

  • См. эту страницу Vimeo для параметров видимости: privacy.view и privacy.embed

• Теперь вы должны иметь возможность загружать видео напрямую из редактора тем Discourse на Vimeo

Публикация видео

• Чтобы опубликовать видео, создайте новую тему или ответьте на существующую тему.

• Нажмите новую кнопку «Загрузить в видео» на панели инструментов редактора (иконка видео). Эта кнопка отображается только если вы включили загрузку на YouTube или Vimeo (или обе) в настройках плагина.

• Выберите файл видео и при желании отредактируйте детали, такие как заголовок и описание.

• Нажмите кнопку «Загрузить на Vimeo» или «Загрузить на YouTube».

  • Отображаемые кнопки зависят от того, включена ли загрузка на YouTube / Vimeo (одна или обе).

  • Будет показан прогресс загрузки, после чего система будет ждать завершения процесса транскодирования видео.

  • Окно останется открытым до завершения транскодирования.

  • После завершения транскодирования ссылка на видео будет добавлена в редактор (если не произошло ошибки транскодирования).

• Сохраните пост, и ваше видео смогут просмотреть все остальные участники сообщества
  (в зависимости от выбранных вами параметров видимости).

Запросы на новые функции

Вы можете запросить дополнительные функции или поддержку, обратившись ко мне @ti0.

Вклад

Если этот компонент темы оказался вам полезен, пожалуйста, рассмотрите возможность сделать пожертвование разработчику по этой ссылке PayPal: PayPal.Me

Большие и малые вклады одинаково приветствуются

Если вы хотите улучшить компонент / плагин, приветствуются pull-запросы.

	Предварительный просмотр	Предварительный просмотр создателя тем
	Репозиторий	discourse-video-upload
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начинающее руководство по использованию тем Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

Это значительно упрощает установку и работает точно так же, как плагин.

Значит, плагин будет снят с поддержки?

[ti0]

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

[Don]

Спасибо @ti0 Это снова великолепно Гораздо удобнее использовать компонент темы, чем плагин.

Один вопрос. Можете ли вы добавить эти тексты для перевода? Загрузка, транскодирование видео, а также заголовок, описание и другие детали видео? Спасибо!

[ti0]

@Don теперь все метки в компоненте можно настроить

[Don]

Привет!

Мне очень нравится ваш компонент, спасибо еще раз за его создание.

Он работал отлично, но теперь у нас возникли некоторые проблемы
Иногда при транскодировании видео (только файлы mp4) возникает ошибка status.error.transcode. Видео загружается корректно и отображается на Vimeo, но ссылка не вставляется в редактор.

Другая проблема: мы не можем загружать файлы mp4 через браузер Safari на macOS.

Возможно ли как-то решить эти проблемы?

Спасибо за ответ!

[ti0]

Привет @Don, спасибо, что заметили эту пограничную ситуацию в Safari на MacOS. Похоже, это проблема самого Safari (ссылка на SO). Я исправил эту проблему в компоненте темы, поэтому после обновления и перезагрузки страницы вы сможете загружать MP4-файлы из Safari. Я только что протестировал это на своей машине, и теперь всё работает.

Что касается ошибок транскодирования, они возникают на стороне Vimeo, и мы не можем ничего сделать с нашей стороны.

[Don]

Спасибо за быстрое исправление! Теперь всё отлично работает в Safari

[Don]

Привет, @ti0,

Похоже, механизм загрузки Vimeo изменился. Когда вы размещаете ссылку в редакторе форума, на Vimeo начинается конвертация видео. Из-за этого видео нельзя вставить одним блоком и воспроизвести на форуме, так как оно ещё не готово. Спасибо за вашу помощь!

[anon82467725]

@Don

Другая проблема в том, что мы не можем загружать файлы mp4 через браузер Safari на MacOS.

У меня та же ситуация, но теперь проблема, похоже, затрагивает Mozilla Firefox на всех платформах.

Было еще несколько других проблем в Mozilla Firefox, но мне придется вернуться к ним, чтобы дать дополнительные пояснения.

[Don]

По-моему, проблема в следующем. На Vimeo после этапа Upload и до этапа Convert есть раздел Waiting for convert.

В компоненте есть константа
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Если я не ошибаюсь, это означает, что после завершения процесса загрузки каждые 10 секунд отправляется запрос к Vimeo. Именно поэтому процесс ожидания завершается, когда видео готово. Поскольку API Vimeo не поддерживает вебхуки и аналогичные механизмы, нам приходится периодически отправлять запросы, чтобы определить, продолжается ли процесс транскодирования или он уже завершён.

Я изменил это значение на 60 секунд. До появления более оптимального решения этого будет достаточно для большинства загрузок, чтобы избежать лишних запросов в процессе ожидания. Я тестировал с файлами малого размера (~10 МБ), среднего (~500 МБ) и большого (~2 ГБ).
При загрузке малых файлов время ожидания составляет несколько секунд (~4–5 сек), средних — ~10–15 сек, больших — ~40–45 сек. Похоже, это зависит от размера загружаемого файла.

Кажется, что всё работает, но если процесс ожидания конвертации занимает более 60 секунд, ссылка будет вставлена так же, как и раньше. Было бы хорошо, если бы можно было полностью исключить этот этап ожидания.

[Zup]

Я бы предпочел, чтобы загрузки в Vimeo отправлялись на аккаунт загрузившего, а не на мой общий аккаунт… это возможно?

[linzo (Collins)]

@ti0 Не знаю, только ли у меня так, но кажется, что что-то сломалось. Загрузка застряла на этапе Authenticating, и в консоли Chrome отображается следующая ошибка:

Некоторые ресурсы заблокированы, так как их источник не указан в политике безопасности контента (CSP) вашего сайта. Политика CSP вашего сайта основана на разрешённых списках, поэтому для доступа к ресурсам они должны быть включены в этот список.

Политика безопасности контента сайта задаётся либо через HTTP-заголовок (рекомендуется), либо через мета-тег HTML.

Чтобы исправить эту проблему, выполните одно из следующих действий:

1. (Рекомендуется) Если вы используете разрешённый список для `'script-src'`, рассмотрите возможность перехода от CSP на основе разрешённых списков к строгой CSP, поскольку строгие CSP более устойчивы к XSS. См. инструкцию по настройке строгой CSP.

2. Или внимательно проверьте, что все заблокированные ресурсы являются надёжными; если это так, добавьте их источники в CSP вашего сайта. ⚠️ Никогда не добавляйте в CSP вашего сайта источники, которым вы не доверяете. Если вы не доверяете источнику, рассмотрите возможность размещения ресурсов на собственном сайте.

ЗАБЛОКИРОВАННЫЕ РЕСУРСЫ
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

заблокировано script-src-elem api.js:12

[ti0]

@linzo это проблема CSP, она не имеет ничего общего с компонентом темы. Пожалуйста, прочитайте о CSP в Discourse здесь: Mitigate XSS Attacks with Content Security Policy

@Zup

Я бы предпочёл, чтобы загрузки Vimeo отправлялись в аккаунт загрузчика, а не в мой общий аккаунт… возможно ли это?

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

@Don

Значит, видео нельзя встроить в одну строку и воспроизвести на форуме, потому что оно ещё не готово.

Извините за задержку с ответом — да, после загрузки происходит процесс транскодирования, и диалоговое окно загрузки показывает это перед встраиванием видео. С моей стороны всё работает как ожидается. Оно ожидает завершения транскодирования, и только тогда закрывает диалоговое окно и встраивает видео. Вот демонстрация:

[debryc (Deborah Chang)]

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

Я попытался просмотреть его в предварительном просмотре создателя темы и получил уведомление «Доступ запрещён».

[Don]

Привет, Дебора,

Мы используем это на нашем форуме с загрузками Vimeo, и это отлично работает на всех устройствах. Процесс выбора такой же, как в Discourse, но после выбора видео вам нужно нажать кнопку «Загрузить из Vimeo» или «Загрузить из YouTube», чтобы начать загрузку.

[debryc (Deborah Chang)]

Ваш форум публичный? Можно ли его посмотреть? Очень хотелось бы увидеть его в действии! Какой у него адрес?

[davidkingham]

Это работает отлично! Было бы здорово добавить возможность загружать видео в отдельную папку на Vimeo, чтобы я мог разделять загрузки пользователей от своих собственных. Спасибо за этот инструмент!

[ti0]

Рад, что вам понравилось Если вы готовы внести вклад в эту задачу, я могу реализовать её сам, или вы можете отправить pull request. Дайте знать.

[debryc (Deborah Chang)]

Можно ли автоматически добавлять субтитры к видео и отображать их по умолчанию? Для нас это крайне важно с точки зрения доступности.