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

Question

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

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

感谢您的帮助!

Answer 1

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

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

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