Twitch引入了一項功能，當您打開一個流頁面並導航到該網站的其他部分時，允許視頻在左下角保持播放而不會中斷。這甚至可以在瀏覽器中按下後退按鈕時起作用，並且只有在關閉標籤頁或手動輸入要訪問的URL時纔會中斷（例如https://www.twitch.tv/directory/discover）。Twitch如何在多個頁面上保留一個持久的視頻窗口？
我一直在想如何做到這一點。視頻被嵌入到類爲「js-player-persistent」的div中，因此我認爲它與Javascript有關並從會話存儲獲取數據，但我不確定這需要多少努力。
感謝您的幫助！
Twitch構建於前端的EmberJS上，使其成爲單頁應用程序（SPA）。這使得他們不必在瀏覽時重新加載頁面，他們只是利用AJAX加載所需的數據，以在指定的窗口中顯示下一頁。這是通過瀏覽器的pushState API或不使用pushState的瀏覽器的hashbang實現完成的。
看着它們的實現，它們可能有一個鉤子，在它發生之前，在視頻播放器之前尋找導航變化，然後在那個角落創建一個DOM元素並將視頻放入其中，然後它們繼續將主頁面更改爲您要去的任何地方。
在Angular，React，Ember，Vue等大多數SPA前端都可以很容易地完成此操作，這對他們來說是一大好處。
不是問題@jastend，我很喜歡Twitch做這個功能的方式，很酷的看着它。 – firrae
Twitch是一個Ember應用程序，這意味着它是一個單頁面應用程序。當您在「頁面」之間導航時，它不會重新加載整個頁面。關於使用瀏覽器的導航按鈕，JavaScript路由器利用browser history API來模擬正常的導航。
謝謝tiagohngl，這解釋了很多。 – jastend
在我原來的評論得到如此受歡迎程度後，我想我會解釋我的推定好一點。
Twitch是SPA或單頁應用程序。這意味着當你進入Twitch網站上的新「頁面」時，你實際上並沒有進入新的網頁，你正在加載一個新的視圖。這些視圖中的每一個基本上都是看似頁面的內容部分，但不會重新加載整個頁面。這通常用於跨平臺移動應用程序。
Twitch這樣做的優點是他們不斷地與後端進行通信，並且網站可以很好地處理流。 （他們最近從Flash轉換到了HTML5視頻播放器。）即使您正在探索網站的不同部分，這也會使您的當前流不斷播放，這對他們來說是一大優勢。
所有這一切的缺點是，您的瀏覽器必須做更多的渲染，這意味着它對您的計算機更密集。值得一提的是，搜索引擎優化對於SPA來說可能更難。
從我的理解來看，Twitch是一款SPA，因此無法將視頻與其他任何東西分開加載，然後當您選擇不同的視頻流時，它只會改變視頻信號源的來源？只是一個想法。 –
我不知道抽搐是如何工作的，但是如果我自己編寫代碼，我會使用一個類似頁面的解決方案，在導航中只改變主體內容的一部分，而不是加載全新的頁面。 – Shilly
@Shilly基本上釘了它。像YouTube一般不會實際加載新頁面，而是用新加載的頁面替換內容。抽搐幾乎肯定會做類似的事情。 –