如何嵌入 YouTube 直播聊天 [英] How to embed youtube livestream chat

问题描述

我正在尝试将 YouTube 直播聊天嵌入到我网站上的网页中，

I'm trying to embed a youtube livestream chat onto a webpage on my website,

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>

我正在尝试这个，但聊天根本不显示，如果尝试使用我拥有的真实域来做嵌入域，但这也不起作用.

I'm trying this, but the chat doesn't show up at all, if tried doing embeded domain using a real domain I own, but that doesn't work either.

推荐答案

在我看来 YouTube 禁用了在外部网站上嵌入实时聊天的功能，但后来忘记更新文档.或者，可能存在破坏此功能的未修复错误.

It seems to me that YouTube disabled the feature to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there could be an unfixed bug that broke this feature.

2021 年更新:聊天嵌入再次起作用. 使用与以前相同的语法.根据下面的有用评论.

2021 update: chat embedding works again. Uses the same syntax as before. As per a helpful comment below.

YouTube 知识库仍然表示，仍然可以将实时聊天 iframe 嵌入外部网站，使用您发布的网址 (参见此处，在嵌入实时聊天"部分).

The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section "Embed Live chat").

但是，当尝试这样做并查看浏览器的控制台时，您将看到如下消息:

However, when trying that and looking into the browser's console, you will see a message like this:

拒绝在框架中显示https://www.youtube.com/live_chat?v=12345&embed_domain=example.com"，因为它将X-Frame-Options"设置为sameorigin".

Refused to display 'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

您还可以看到网络"中的 x-frame-options: SAMEORIGIN 标头查看对 https://www.youtube.com/live_chat?... 请求的响应时，浏览器的开发者工具选项卡.

You can also see that x-frame-options: SAMEORIGIN header in the "Network" tab of the browser's developer tools when looking at the response to the https://www.youtube.com/live_chat?… request.

这意味着 YouTube 不希望浏览器将此嵌入到 iframe 中，除非嵌入到 youtube.com 本身.(在 YouTube 本身，此嵌入代码仍然有效:当您检查 YouTube 上任何当前流式传输的实时视频的源代码时，您会发现那里的实时聊天窗口是使用相同的 /live_chat?... 请求，在 iframe 中.)

This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same /live_chat?… request, in an iframe.)

此功能已被删除的其他迹象:

Additional indications that this feature has been removed:

• YouTube 文档提到:

• The YouTube documentation mentions:

实时聊天模块仅存在于 YouTube 观看页面上——它不关注嵌入式播放器.(来源)

The Live chat module only exists on the YouTube watch pages — it does not follow embedded players. (source)

我相信这是文档的新部分，嵌入实时聊天"一节再往下已经过时了.

I believe that's the new part of the documentation, and the section "Embed live chat" further down is outdated.

本教程 2016 年使用记录的 URL 格式在底部附近嵌入示例实时聊天，它现在显示相同的拒绝在框架中显示 [...]，因为它将X-Frame-Options"设置为sameorigin"."假设这在 2016 年奏效，那么 YouTube 方面肯定发生了一些变化.

This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same "Refused to display […] in a frame because it set 'X-Frame-Options' to 'sameorigin'." Assuming that this worked in 2016, something must have changed on YouTube's side.

这个Reddit 主题讲述了某人的嵌入式实时聊天是如何突然出现的在 2018 年 9 月上旬停止工作 - 就在这个问题被问到之前不久.

This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 – so shortly before this question got asked.

• 您可以使用 YouTube Livestream API，尤其是 LiveChatMessages 端点，用于获取和创建聊天消息.可能有开源库可以帮助解决这个问题.到目前为止，我发现了这个(能够显示但不能创建聊天消息).

• You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).

您可以嵌入您自己的聊天，安装在您自己的服务器上或 云托管的直播聊天解决方案.该解决方案还可以提供 YouTube 实时聊天不提供的功能，例如允许匿名访问者发帖.

You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.

您可以反向代理 https://www.youtube.com/live_chat?... URL，转发 YouTube 的响应，但删除 X-Frame-Options 标头.

You could reverse proxy the https://www.youtube.com/live_chat?… URL, forwarding YouTube's response but with the X-Frame-Options header removed.

如果您只需要一台或几台计算机的解决方案，您可以使用浏览器扩展程序从 YouTube 的响应中删除 X-Frame-Options 标头.请参阅这个问题.

If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.

这篇关于如何嵌入 YouTube 直播聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！