javascript - 在多个客户端同步播放 YouTube 视频

标签 javascript api node.js youtube

你好 Stack Overflow 社区,

我是一个相当新手的编码员,但我有一个我一直在设计的项目,它看起来每天都越来越复杂,我不知道从哪里开始。

从 Synchtube 和 Phonoblaster 获得灵感,我希望为我的网站创建一些东西,让访问者可以一起实时、同步地观看我策划的 YouTube 视频和播放列表。

因为我希望能够将它放在我自己网站的上下文中,所以我不能使用上面列出的已经这样做的服务 - 所以我想弄清楚如何推出我自己的。

在 Stack Overflow 和其他博客上已经写了一些关于这个主题的东西: HEREHERE .

因为我仍然认为自己是一名新手程序员,而且我在 Google 和 Stack 上找到的很多信息往往已经超过 1 或 2 年了,我仍然不确定从哪里开始或者这些信息是否有效过时的。具体来说,我应该学习哪些语言和工具。

根据我目前收集到的信息,Javascript、Node.JS 和 YouTube API 之类的东西将构成它的关键。我以前没有使用过这些中的任何一个,但很想知道其他有经验的编码人员是否有他们自己的建议或想法可以指导我。

非常感谢您抽出时间阅读这篇文章! 希望很快能收到你们中的一些人的来信:)

非常感谢。

最佳答案

部分听起来您需要来自 Youtube 的直播。您可以在此处找到更多信息。 https://support.google.com/youtube/bin/answer.py?hl=en&answer=2474026

如果你能做到这一点,那么在任意数量的用户之间同步播放就像在浏览器中嵌入你的流的常规 YouTube 嵌入一样简单。

回顾过去,如果您想在任意数量的用户之间同步视频播放,第一个大问题是学习如何设置视频时间。幸运的是,使用 hashbang #t=seconds 很容易。

例如:http://www.youtube.com/watch?v=m38RdUGqBPM&feature=g-high-rec#t=619s将在视频的第 619 秒处开始此 HuskyStarcraft 视频。

下一步是让一些后端服务器跟踪当前时间。带有 Socket.io 的 Node.js 非常容易设置。 Socket.io 是一个很棒的库,它通过长轮询等方式优雅地处理来自 Web 套接字的并发连接,即使在非常老的浏览器上也能正常工作。请注意,websockets 甚至不是必需的,但对您来说将是最现代和最全面的方法。否则它的黑客和东西。

一种可行的方法如下。

用户 1 访问您的站点并首先开始播放视频。您页面上的脚本向您的服务器发送一个 XHR 请求,内容为“video started at time X”。然后将 X 存储为开始时间。

此时,您可以走 2 条路线。您可以让客户端脚本使用 Youtube API 来轮询视频并每秒获取其当前状态。如果状态或时间发生变化,则向服务器发送另一个请求以更新状态。

另一个简单的方法是为 User2+ 加载页面,然后发送 XHR 请求以询问视频播放时间。服务器从 User1 发回开始时间之间的差异,然后客户端脚本在 User2+ 的 youtube 播放器上设置 't' hashbang。这使您可以同步开始时间,但如果任何用户暂停或倒回视频,这些状态不会得到更新。不过,后续页面刷新可能会发生这种情况。

整个应用程序的复杂性完全取决于您想要的要求。如果它只是同步开始时间,那么路线 #2 应该工作得很好。不需要套接字,使用 jQuery 或直接使用 javascript 即可轻松实现。

如果您需要任何用户都可以开始/停止/暂停/快进/倒回视频的真正同步体验,那么您正在考虑使用已建立的库解决方案或编写您自己的解决方案。

抱歉,这个答案是开放式的,但您的问题也是如此。 =)

关于javascript - 在多个客户端同步播放 YouTube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13793960/

相关文章:

javascript - 神秘的一行,用于在Webpack : templates. keys().forEach(templates)中要求html模板?

api - 我可以使用 Monkeyrunner 来测试我自己的 API 吗?

node.js - 关于 sequelize 迁移的快速问题

node.js - 有纯 node.js 的教程吗?

javascript - meteor : wait until all templates are rendered

javascript - 从 WebView 调用 Deno 函数。如何?

javascript - JSON:查询连接表不起作用(Cordova Mobile)

php - 如何通过 TinyURL api 缩短包含 "#"符号的 url?

api - 如何在 Karate 中复制节点及其子节点

node.js - 如何通过 Node.js Bluemix 推送 API 注册设备