Twitch 引入了一项功能,当您打开流页面并导航到网站的不同部分时,允许视频在左下角继续播放而不会中断。这甚至在按下浏览器中的后退按钮时也有效,只有在关闭选项卡或手动输入您要转到的 URL 时才会中断(例如 https://www.twitch.tv/directory/discover )。
我一直在努力弄清楚这是如何完成的。该视频嵌入到类为“js-player-persistent”的 div 中,因此我认为它与 Javascript 和从 session 存储中获取数据有关,但我不确定这具体需要付出多少努力。
感谢您的帮助!
最佳答案
Twitch 建立在 EmberJS 之上在前端使其成为单页应用程序(SPA)。这使他们不必在您导航时重新加载页面,他们只需使用 AJAX 加载在指定窗口中显示下一页所需的数据。这是由浏览器的 pushState 完成的。不使用 pushState 的浏览器的 API 或 hashbang 实现。
看看他们的实现,他们可能有一个钩子(Hook)来寻找导航变化,在它发生之前,关闭视频播放器,然后在那个 Angular 落创建一个 DOM 元素并将视频放入其中,然后他们继续将主页更改为您要去的任何地方。
这在大多数 SPA 前端(如 Angular、React、Ember、Vue 等)中都相当容易完成,这对它们来说是一个很大的好处。
关于javascript - Twitch 如何在多个页面上保持持久的视频窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41286748/