Twitch推出了一项功能，当您打开流媒体页面并导航到网站的其他部分时，可以让视频在左下角继续播放而不会中断。这甚至可以在按下浏览器中的后退按钮时工作，只有在关闭选项卡或手动输入您要访问的URL时才会中断（例如https://www.twitch.tv/directory/discover）。
我一直想弄清楚这是怎么做的。该视频嵌入了一个div，其中包含类＆＃34; js-player-persistent＆＃34;，所以我认为它与Javascript有关并从会话存储中获取数据，但我不确定如何这需要特别多的努力。
感谢您的帮助！
答案 0 :(得分：3)
Twitch构建在前端的EmberJS上，使其成为单页应用程序（SPA）。这使得他们无需在导航时重新加载页面，他们只需使用AJAX加载在指定窗口中显示下一页所需的数据。这是通过浏览器的pushState API或不使用pushState的浏览器的hashbang实现来实现的。
看看它们的实现，他们可能有一个钩子，在它发生之前寻找导航变化，从视频播放器开始，然后在那个角落创建一个DOM元素并将视频放入其中，然后他们继续将主页更改为您要去的地方。
这在大多数SPA前端都很容易完成，如Angular，React，Ember，Vue等，对他们来说是一个很大的好处。
答案 1 :(得分：2)
Twitch是一个Ember应用程序，这意味着它是一个单页应用程序。当您在“页面”之间导航时，它不会重新加载整个页面。关于浏览器导航按钮的使用，JavaScript路由器利用browser history API来模拟正常导航。
答案 2 :(得分：1)
在我的原始评论得到尽可能多的人气之后，我想我会更好地解释我的推测。
Twitch是SPA或单页应用程序。这意味着当您转到Twitch网站上的新“页面”时，您实际上并未转到新网页，而是在加载新视图。这些视图中的每一个基本上都是看似页面的内容部分，但不会重新加载整个页面。这通常用于跨平台移动应用程序。
Twitch这样做的优势在于他们不断地与后端进行通信，并且网站可以很好地处理这些流。 （他们最近从Flash转换为HTML5视频播放器。）即使您正在探索网站的不同部分，这也是让您当前的流不断播放对他们来说是一个重要的优势。
所有这一切的缺点是，您的浏览器必须执行更多渲染，这意味着它对您的计算机来说更加密集。值得一提的是，搜索引擎优化可能会更加困难。