使用主题组件将视频上传到YouTube和Vimeo

Name: Discourse Video Upload Plugin with YouTube and Vimeo Demo
Uploaded: 2020-11-13T21:16:22Z

ti0 · 2020 年11 月 13 日 21:16

此新主题组件支持从 Discourse 编辑器向 YouTube 和 Vimeo 上传视频。对于已经熟悉我最近开发的插件的用户，现在该功能已集成到此主题组件中，可添加到任何主题中。这使得安装更加简便，并且工作方式与插件完全相同。

功能

所有论坛成员均可将视频上传至 Vimeo 或 YouTube（管理员可选择启用其中一项或两项）。

管理员可通过管理设置控制上传到 Vimeo 的视频的查看和嵌入隐私权限。

用户可在上传弹窗中控制上传到 YouTube 的视频的查看隐私权限。

您可以在此处观看该插件的演示（组件与插件完全相同，除了设置页面。组件设置页面位于管理 > 自定义 > 组件 > 视频上传）：

配置

重要提示：对于主题组件，您需要确保为实例中使用的主题激活该组件（点击“添加所有主题”或选择您需要的主题）。

启用上传到 YouTube 和 Vimeo 的开发设置如下。如果您希望由他人代为设置，可通过联系 @ti0 请求支持。

用于 YouTube 上传

YouTube 上传将发送至上传者的账户，而 Vimeo 上传则发送至公共账户。

查看步骤

在 https://console.developers.google.com 创建账户和项目
启用 YouTube Data API v3
设置面向外部用户的 OAuth 同意屏幕（除非您的 Discourse 论坛所有用户都属于同一个 Google 组织）。

设置您的凭据：
- 创建 OAuth 客户端 ID
- 选择“Web 应用”类型
- 在“授权 JavaScript 来源”部分添加您的 Discourse 实例 URL
仅复制生成的客户端 ID
进入 Discourse 管理中的组件设置页面，将客户端 ID 粘贴到 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 upload enabled 设置来启用 Vimeo 上传。
调整查看和嵌入隐私选项
- 请参阅此 Vimeo 页面了解隐私选项：privacy.view 和 privacy.embed
现在您应能够从 Discourse 主题编辑器直接向 Vimeo 上传视频

发布视频

要发布视频，请创建新主题或回复现有主题。
点击编辑器工具栏中的新 上传到视频 按钮（视频图标）。该按钮仅在插件设置中启用了 YouTube 或 Vimeo（或两者）时才可见。
选择视频文件，并根据需要编辑标题和描述等详细信息。
点击“上传到 Vimeo"或“上传到 YouTube"按钮。
- 显示的按钮取决于您是否启用了 YouTube / Vimeo 上传（其中一项或两项）。
- 系统将显示上传进度，然后等待视频完成转码过程。
- 弹窗将保持打开状态，直到转码完成。
- 转码完成后，视频链接将被添加到编辑器中（除非出现转码错误）。
保存帖子，您的视频即可被所有其他社区用户查看（取决于您选择的隐私选项）。

功能请求

您可以通过联系我 @ti0 请求更多功能或支持。

贡献

如果您觉得此主题组件有帮助，请考虑通过以下 PayPal 链接向开发者捐款：PayPal.Me

无论贡献大小，我们同样欢迎

如果您希望增强该组件/插件，欢迎提交 PR。


	预览	主题创建器预览
	仓库	discourse-video-upload
	安装指南	如何安装主题或主题组件
	Discourse 主题新手？	Discourse 主题使用入门指南

Canapin · 2020 年11 月 13 日 21:18

那么插件会被停止开发吗？

ti0 · 2020 年11 月 13 日 21:20

现在还不行，但我认为维护主题组件会容易得多。我暂时会保留该插件，但建议迁移到主题组件。

Don · 2020 年11 月 14 日 07:56

感谢 @ti0 这太棒了使用主题组件比使用插件方便多了。

有个问题，能否添加这些待翻译的文本？上传、视频转码以及视频详情（标题、描述等）？谢谢！

ti0 · 2020 年11 月 14 日 13:41

@Don 组件中的所有标签现在都可以自定义了

Don · 2021 年1 月 4 日 21:17

你好！

我非常喜欢你们的组件，再次感谢你们的开发。

它运行得非常顺畅，但现在我们遇到了一些问题：
有时在转码视频（仅限 mp4 文件）时会出现 status.error.transcode 错误。视频可以正确上传，但仅在 Vimeo 上显示，而未能将链接插入到编辑器中。

另一个问题是，我们无法通过 macOS 上的 Safari 浏览器上传 mp4 文件。

请问有可能解决这些问题吗？

感谢您的回复！

ti0 · 2021 年1 月 5 日 00:40

你好 @Don，感谢你在 MacOS Safari 上发现这个边缘情况。这似乎是 Safari 的一个问题（Stack Overflow 上的相关参考）。我已在主题组件中修复了该问题，因此您更新后刷新页面，即可在 Safari 中上传 MP4 文件。我刚刚在自己的机器上测试过，现在可以正常工作了。

关于转码错误，这是 Vimeo 端发生的问题，我们这边无法进行任何处理。

Don · 2021 年1 月 5 日 01:11

感谢您的快速修复！现在它在 Safari 上运行得非常完美

Don · 2021 年3 月 11 日 13:01

你好 @ti0，

看起来 Vimeo 的上传机制有所变更。当在论坛编辑器中放置链接后，Vimeo 会开始转换视频。因此，视频尚未准备好，无法通过单盒方式嵌入并在论坛中播放。感谢您的帮助！

anon82467725 · 2021 年3 月 11 日 18:53

我也遇到了同样的问题，但现在该问题似乎已影响所有平台上的 Mozilla Firefox。

Mozilla Firefox 还出现过其他一些问题，但我需要回头查看那些问题以提供更详细的说明。

Don · 2021 年3 月 12 日 20:08

所以我认为问题在于：在 Vimeo 上，上传之后、转换之前有一个“等待转换”（Waiting for convert）阶段。

在组件中有一个
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

如果我没理解错，这意味着在上传过程结束后，系统会每隔 10 秒向 Vimeo 发送一次请求，因此“等待”状态会持续显示，直到视频转换完成。由于 Vimeo API 不支持 Webhook 等功能，我们需要定期发送请求以判断转码过程是否仍在进行或已完成。

我已将此间隔改为 60 秒，作为临时方案，直到出现更好的解决方案。对于大多数上传任务，这已足够跳过“等待”阶段的频繁请求。我分别测试了小型（约 10MB）、中型（约 500MB）和大型（约 2GB）的上传文件。
小型上传的等待时间约为 4–5 秒，中型约为 10–15 秒，大型约为 40–45 秒。我认为这取决于上传文件的大小。
目前看来效果不错，但如果“等待转换”过程超过 60 秒，链接仍会像以前一样直接粘贴。如果我们能跳过这个“等待”阶段，那就更好了。

Zup · 2021 年3 月 18 日 00:04

我更希望 Vimeo 上传的视频直接进入上传者的账户，而不是我的公共账户……这可以实现吗？

linzo · 2021 年7 月 18 日 12:06

@ti0 我不确定是不是只有我遇到这个问题，但我觉得有些地方出错了。上传卡在“正在验证”状态，Chrome 控制台中显示以下错误：

某些资源被阻止，因为其来源未列入您站点的内容安全策略（CSP）白名单。您的站点 CSP 基于白名单，因此必须将资源列入白名单才能访问。

站点的内容安全策略可通过 HTTP 头（推荐）或 meta 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 · 2021 年8 月 25 日 17:02

@linzo 这是一个 CSP（内容安全策略）问题，与主题组件无关。请在此阅读有关 Discourse CSP 的说明：Mitigate XSS Attacks with Content Security Policy

@Zup，这是一个额外的功能请求——当然可以实现，但这属于额外工作，如果您希望实施，需要付费。请告诉我您的决定。

抱歉回复晚了——是的，上传后会有一个转码过程，上传对话框会在嵌入视频之前显示该状态。在我这边运行正常。它会等待转码完成，之后才会关闭对话框并嵌入视频。这是一个演示：

debryc · 2021 年9 月 23 日 17:38

我对这个主题组件的潜力感到非常兴奋。这个主题组件在移动端也能使用吗？也就是说，如果我在使用手机，能否从我的照片库中上传视频？

我尝试在主题创建器预览中查看，但收到了“访问被拒绝”的提示。

Don · 2021 年9 月 23 日 17:58

你好，Deborah，

我们在论坛上使用它配合 Vimeo 上传，在所有设备上运行效果都非常好。选择流程与 Discourse 类似，但选择视频后，您需要点击“上传 Vimeo”或“上传 YouTube”按钮来开始上传。

debryc · 2021 年9 月 23 日 18:00

您的论坛是公开的吗？我可以看看吗？很期待看到它的实际运行效果！网址是什么？

davidkingham · 2021 年9 月 24 日 04:22

这功能太棒了！如果能有一个选项将视频上传到 Vimeo 上的特定文件夹，以便将用户的上传内容与我自己的内容分开，那就更好了。感谢你们提供这个功能！

ti0 · 2021 年9 月 24 日 04:44

很高兴您喜欢它如果您愿意为此功能请求做出贡献，我可以实现它，或者您可以提交 PR，请告诉我。

debryc · 2021 年9 月 24 日 11:00

视频能否自动添加字幕并默认显示？这对我们的无障碍访问至关重要。

话题		回复	浏览量
Insert Video Theme component official , insert-video	14	7325	2025 年10 月 29 日
Discourse Audio Message Development	26	2045	2024 年6 月 9 日
Authentication Error When Using Discourse Video Upload Theme Component Support	3	469	2021 年3 月 11 日
Cloudflare Stream video upload theme component Marketplace	3	682	2022 年10 月 4 日
Media Overlay component Theme component	40	6957	2024 年1 月 12 日

使用主题组件将视频上传到YouTube和Vimeo

功能

配置

用于 YouTube 上传

用于 Vimeo 上传

发布视频

功能请求

贡献

相关话题