Twitch如何在多个页面上保留持久视频窗口？

Question

Twitch引入了一项功能,当您打开流页面并导航到网站的其他部分时,可以让视频在左下角继续播放而不会中断.这甚至在按下浏览器中的后退按钮时起作用,并且仅在关闭选项卡或手动键入要转到的URL时中断(例如https://www.twitch.tv/directory/discover).

我一直试图弄清楚这是怎么做的.该视频嵌入到具有"js-player-persistent"类的div中,因此我假设它与Javascript有关并从会话存储中获取数据,但我不确定这需要多少努力才能具体.

谢谢你的帮助!

Answer 1

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

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

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