重新设计的 Reddit 话题嵌入视频

我们如何在帖子中嵌入 Reddit 视频?例如这个帖子:

在此处链接

其嵌入代码如下:

<blockquote class="reddit-card" data-card-created="1588774544"><a href="https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/">I also decided to edit at 2AM</a> from <a href="http://www.reddit.com/r/VALORANT">r/VALORANT</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

那这个怎么样?

  https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

它的作用是:

https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

哦,这样不行。你希望视频直接在 Discourse 中播放,而不是跳转到 Reddit。

1 个赞

谢谢。
是的,如果可能的话,我们希望像 YouTube 和 Vimeo 那样直接在那里播放。

哈哈,你们俩是这么想的,但你们考虑过 Reddit 的立场吗?

自从他们改变了整个理念并推出了 v.redd.it 之后,情况已经大不相同了。

所有的 OpenGraph 和 Twitter Card 标签都只提供静态图片。Reddit 明确规定只允许嵌入静态图片。

如果你深入探究,会发现视频位于 DASH 容器中,因此音频和视频是单独的文件。要在 Discourse 中播放它,至少需要使用自定义的 JavaScript 视频播放器。

1 个赞

实际上 Reddit 是允许这样做的:

当你点击“嵌入”按钮时,会显示以下内容:

我的问题是如何在我的 Discourse 站点帖子中允许显示该内容。

我试了 old.reddit 的分享功能,结果也只是一张图片。这是 Reddit 的新界面吗?

是的,这是新款。

1 个赞

哦,看起来他们把它外包给了 embed.ly。

深入研究后发现,实际上可以使用帖子 ID 来构建一个可用的 iFrame。

除非 @techAPJ 想接手,否则我建议标记为 #pr-welcome。

<iframe src="https://old.reddit.com/mediaembed/gdyrsg" width="690" height="388">

[一个可以正常工作并自动播放视频的 iFrame]

2 个赞

@Falco,我们能不能想个办法不让视频自动播放?

编辑:如果我们在 HTML 清理器中强制对 iframe 元素应用 allow="autoplay 'none'",这或许能解决这个问题(仅限新浏览器)。

此外,播放器上的所有按钮(如暂停、全屏等)均无法使用。

有人愿意接手这个 PR 吗?:thinking:

如果您点击此示例 URL this 上的“分享”>“嵌入”按钮,然后复制此代码:


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419">
</iframe>

视频确实可以嵌入并编辑器窗口中播放:

但是提交帖子后视频就消失了。

在 iframe 元素末尾添加 allow="autoplay 'none'" 可以使视频出现,并且可以正常播放,所有嵌入控件(暂停、播放等)都能正常工作:


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419"
allow="autoplay 'none'">
</iframe>

像这样: