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等，並且是他們的主要獎勵。

Answer 2

Twitch是一個Ember應用程序，這意味着它是一個單頁應用程序。 當您在“頁面”之間導航時，它不會重新加載整個頁面。 關於瀏覽器導航按鈕的使用，JavaScript路由器利用瀏覽器歷史API來模擬正常導航。

Answer 3

在我的原始評論得到了盡可能多的人氣之后，我想我會更好地解釋我的推測。

Twitch是SPA或單頁應用程序。 這意味着當您轉到Twitch網站上的新“頁面”時，您實際上並未轉到新網頁，而是在加載新視圖。 這些視圖中的每一個基本上都是看似頁面的內容部分，但不會重新加載整個頁面。 這通常用於跨平台移動應用程序。

Twitch這樣做的優勢在於他們不斷地與后端進行通信，並且站點可以很好地處理流。 （他們最近從Flash轉換為HTML5視頻播放器。）即使您正在探索網站的不同部分，這也是讓您當前的流不斷播放對他們來說是一個重要的優勢。

所有這一切的缺點是，您的瀏覽器必須執行更多渲染，這意味着它對您的計算機來說更加密集。 值得一提的是SEO可能更難與SPA一起使用。