Twitch 如何在多个页面上保持持续的视频 window?

How does Twitch keep a persistent video window over several pages?

Twitch 引入了一项功能,当您打开流页面并导航到网站的不同部分时,允许视频在左下角继续播放而不会中断。这甚至在按下浏览器中的后退按钮时也有效,只有在关闭选项卡或手动输入您想要转到的 URL 时才会中断(例如 https://www.twitch.tv/directory/discover)。

我一直在努力弄清楚这是如何完成的。视频嵌入到 div 和 class "js-player-persistent",所以我认为它与 Javascript 和从会话存储获取数据有关,但我'我不确定这需要多少努力。

感谢您的帮助!

Twitch 是一个 Ember 应用程序,这意味着它是一个单页应用程序。当您在 "pages" 之间导航时,它不会重新加载整个页面。关于浏览器导航按钮的使用,JavaScript 路由器利用 browser history API 模拟正常导航。

Twitch 基于 EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API 或不使用 pushState 的浏览器的 hashbang 实现。

看看他们的实现,他们可能有一个钩子来寻找导航变化,在它发生之前,关闭视频播放器,然后在那个角落创建一个 DOM 元素并放置视频在其中,然后他们继续将主页更改为您要去的任何地方。

这在大多数 SPA 前端(如 Angular、React、Ember、Vue 等)中都相当容易完成,这对它们来说是一个很大的好处。

在我最初的评论获得如此高的人气之后,我想我应该更好地解释一下我的假设。

Twitch 是一个 SPA,即单页应用程序。这意味着当您转到 Twitch 网站上的新 "page" 时,您实际上并没有转到新网页,而是加载了一个新视图。这些视图中的每一个基本上都是看起来像页面但不会重新加载整个页面的内容部分。这通常用于跨平台移动应用程序。

Twitch 这样做的优点是他们不断地与他们的后端通信,并且该站点可以很好地处理流。 (他们最近从 Flash 切换到 HTML5 视频播放器。)这以及即使您正在浏览网站的不同部分也能持续播放当前流是他们的一大优势。

所有这一切的缺点是您的浏览器必须进行更多渲染,这意味着它对您的计算机来说更加密集。值得一提的是 SPA 的 SEO 可能更难。