Как Twitch поддерживает постоянное видео окно на нескольких страницах?

Twitch представила функциональность, которая, когда вы открыли страницу потока и переходите к другой части сайта, позволяет видео продолжать играть в левом нижнем углу без каких-либо перерывов. Это даже работает при нажатии кнопки "Назад" в браузере и только ломается при закрытии вкладки или вручную набирает URL, к которому вы хотите перейти (например, https://www.twitch.tv/directory/discover).

Я пытался выяснить, как это делается. Видео встраивается в div с классом "js-player-persistent", поэтому я предполагаю, что он имеет какое-то отношение к Javascript и получает данные из хранилища сеансов, но я не уверен, сколько усилий это требует конкретно.

Спасибо за вашу помощь!

Ответ 1

Twitch построен на EmberJS на лицевой стороне, что делает его единственным приложением страницы (SPA). Это позволяет им не перезагружать страницу во время навигации, они просто используют AJAX для загрузки данных, необходимых для отображения следующей страницы в заданном окне. Это достигается с помощью браузера pushState API или реализации хеш-бэнга для браузеров, которые не используют pushState.

Посмотрев на их реализацию, у них, вероятно, есть крючок, который ищет изменения навигации, прежде чем это произойдет, с видеопроигрывателя и в это время создайте элемент DOM в этом углу и поместите в него видео, затем они продолжат с изменением главной страницы туда, куда вы идете.

Это довольно легко сделать в большинстве передних концов SPA, таких как Angular, React, Ember, Vue и т.д. и для них большой бонус.

Ответ 2

Twitch - это приложение Ember, что означает, что это одностраничное приложение. Он не перезагружает всю страницу при переходе между "страницами". Что касается использования кнопок навигации браузера, маршрутизаторы JavaScript используют API истории браузера для имитации нормальной навигации.

Ответ 3

После того, как мой первоначальный комментарий получил такую же популярность, как я, я подумал, что лучше объясню свою презумпцию.

Twitch - это приложение SPA или одностраничное приложение. Это означает, что когда вы переходите на новую страницу на веб-сайте Twitch, вы фактически не идете на новую веб-страницу, вы загружаете новое представление. Каждое из этих представлений представляет собой в основном разделы контента, которые выглядят как страницы, но не перезагружают всю страницу. Это обычно используется с мобильными приложениями с кросс-платформой.

Плюсы Twitch, которые делают это, это то, что они постоянно общаются со своим back-end, и сайт отлично справляется с потоками. (Они недавно переключились с видеопроигрывателя Flash на HTML5.) Это, а также постоянный проигрыш вашего текущего потока, даже если вы изучаете разные разделы сайта, является для них главным плюсом.

Недостатки всего этого в том, что ваш браузер должен сделать больше рендеринга, что означает, что он более интенсивный для вашего компьютера. И стоит упомянуть, что SEO может быть сложнее с SPA.