Javascript Twitch如何在几个页面上保持一个持久的视频窗口？

Twitch引入了一种功能，当你打开一个流页面并导航到网站的另一个部分时，它允许视频在左下角不间断地播放。这甚至在按下浏览器中的“上一步”按钮时起作用，只有在关闭选项卡或手动键入要转到的URL（例如）时才会中断

我一直在想这是怎么做到的。视频被嵌入到一个div中，类为“jsplayer persistent”，因此我假设它与Javascript和从会话存储获取数据有关，但我不确定这具体需要多少努力

---

谢谢你的帮助

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

Twitch构建在前端，使其成为单页应用程序（SPA）。这使得他们不必在导航时重新加载页面，他们只需利用AJAX加载在指定窗口中显示下一页所需的数据。对于不使用pushState的浏览器，这是通过浏览器的API或hashbang实现实现的

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

---

这在大多数SPA前端（如Angular、React、Ember、Vue等）中都很容易做到，这对他们来说是一个很大的好处。

在我最初的评论获得了同样多的支持后，我想我应该更好地解释我的假设

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

Twitch这样做的好处是，他们不断地与后端进行通信，而站点能够很好地处理流。（他们最近从Flash切换到HTML5视频播放器。）这以及让你的当前流不断播放，即使你正在浏览网站的不同部分，对他们来说是一个主要的优势

---

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

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