Twitch 如何在多个页面上保持一个持久的视频窗口？答案

【问题标题】：How does Twitch keep a persistent video window over several pages?Twitch 如何在多个页面上保持一个持久的视频窗口？
【发布时间】：2016-12-22 15:38:26
【问题描述】：

Twitch 引入了一项功能，当您打开流页面并导航到网站的其他部分时，该功能允许视频在左下角继续播放而不会出现任何中断。这甚至在按浏览器中的后退按钮时也有效，并且仅在关闭选项卡或手动输入您要访问的 URL 时中断（例如 https://www.twitch.tv/directory/discover）。

我一直在试图弄清楚这是如何完成的。该视频被嵌入到具有“js-player-persistent”类的 div 中，所以我认为它与 Javascript 和从会话存储中获取数据有关，但我不确定这具体需要多少努力。

感谢您的帮助！

【问题讨论】：

据我了解，Twitch 是一个 SPA，所以不能将视频与其他所有内容分开加载，然后当您选择不同的流时，它只会更改视频源的来源？只是一个想法。
我不知道 twitch 是如何工作的，但如果我必须自己编写代码，我会使用类似单页的解决方案，在导航时，只有部分正文内容发生变化，而不是加载一个全新的页面。
@Shilly 基本上做到了。像 YouTube 一般不会真正加载新页面，而是用新加载的页面替换内容。 Twitch 几乎肯定会做类似的事情。
我认为，当您在 Twitch 中导航时，您并没有改变页面，而只是改变了当前的“视图”......所以应用程序的框架总是相同的。他们在主视图前面创建了一个孤立的视图。
您可以通过使用 URL 哈希保持在同一页面上来保持后退按钮的兼容性，但仍然有一个历史条目和一个事件 (onhashchange) 来跟踪请求的视图。例如：myapp.com --> myapp.com/#!/video1 --> myapp.com/#!/video2 然后，如果需要，您可以使用 url 重写来再次从 URL 中删除哈希值。另一种方法是使用历史模块中的 replaceState() API，但以我有限的经验，这比使用哈希片段更复杂。

标签： javascript twitch

【解决方案1】：

Twitch 建立在前端的 EmberJS 之上，使其成为单页应用程序 (SPA)。这使他们不必在您导航时重新加载页面，他们只需使用 AJAX 加载在规定窗口中显示下一页所需的数据。这是通过浏览器的pushState API 或不使用 pushState 的浏览器的 hashbang 实现来实现的。

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

这在大多数 SPA 前端（如 Angular、React、Ember、Vue 等）中相当容易完成，对它们来说是一大优势。

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢 tiagohngl，这解释了很多。

【解决方案3】：

在我最初的评论获得了同样多的人气之后，我想我会更好地解释我的假设。

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

Twitch 这样做的优点是他们不断与后端进行通信，并且网站可以很好地处理流。（他们最近从 Flash 切换到 HTML5 视频播放器。）这对他们来说是一大优势。

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

【讨论】：