Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does Twitch keep a persistent video window over several pages?

Twitch has introduced a functionality that, when you've opened a stream page and navigate to a different part of the site, allows the video to keep playing in the bottom left corner without any interruption. This even works when pressing the back button in the browser and only breaks when closing the tab or manually typing in the URL you want to go to (e.g. https://www.twitch.tv/directory/discover).

I've been trying to figure out how this is being done. The video is embedded into a div with the class "js-player-persistent", so I assume it has something to do with a Javascript and getting data from the session storage, but I'm unsure how much effort this requires specifically.

Thanks for your help!

like image 557
jastend Avatar asked Dec 22 '16 15:12

jastend


People also ask

What does VOD stand for on Twitch?

A VOD (Video on Demand) is an archive of content previously streamed live on Twitch. Utilizing VODs can help grow your channel and also allow your community to watch content they may have missed otherwise.

How long do Twitch VODs last?

How Long Do VoDs Stay On Twitch? By default, for streamers who are not partner, VoDs remain on Twitch for 14 days. During this time, you can download your VoD, highlight it in the video producer or create clips from it.

Does Twitch auto save streams?

How To Save Your Streams On Twitch. Twitch can automatically save your broadcasts, but only if you manually enable the option in your VOD Settings panel.


1 Answers

Twitch is built on EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API or the hashbang implementation for browsers that don't utilize pushState.

Looking at their implementation of it, they likely have a hook that looks for navigation changes, before it happens, off the video player and at that time create a DOM element in that corner and put the video in it, then they proceed with changing the main page to wherever you are going.

This is fairly easily done in most SPA front ends like Angular, React, Ember, Vue, etc. and is a major bonus to them.

like image 163
firrae Avatar answered Sep 20 '22 07:09

firrae