트 위트는 스트림 페이지를 열고 사이트의 다른 부분을 탐색 할 때 중단없이 비디오를 왼쪽 하단 모서리에서 계속 재생할 수있는 기능을 도입했습니다. 브라우저에서 뒤로 버튼을 누르면 탭이 닫히거나 이동하려는 URL을 수동으로 입력 할 때만 작동합니다 (예 : https://www.twitch.tv/directory/discover).트 위치가 여러 페이지에 걸쳐 영구 비디오 창을 유지하는 방법은 무엇입니까?
나는 어떻게 이런 일이 일어나고 있는지 알아 내려고 노력해 왔습니다. 동영상은 클래스 "js-player-persistent"로 div에 임베드됩니다. 따라서 자바 스크립트와 관련이 있으며 세션 저장소에서 데이터를 가져 오는 것으로 가정합니다. 그러나 구체적으로 얼마나 많은 노력이 필요한지 확신 할 수 없습니다.
도움 주셔서 감사합니다.
트위치는 프런트 엔드에서 EmberJS에 작성되어 단일 페이지 응용 프로그램 (SPA)이됩니다. 이렇게하면 탐색 할 때 페이지를 다시로드 할 필요가 없으며 AJAX를 사용하여 지정된 페이지에 다음 페이지를 표시하는 데 필요한 데이터를로드하기 만하면됩니다. 이는 브라우저의 pushState API 또는 pushState를 사용하지 않는 브라우저에 대한 hashbang 구현으로 수행됩니다.
동영상 플레이어의 구현을 보면 동영상 플레이어에서 내비게이션 변경 사항을 찾고 해당 시점에 DOM 요소를 만들고 그 안에 비디오를 넣을 수있는 고리가있을 가능성이 높습니다. 메인 페이지를 어디로 가든 변경하십시오.
이것은 Angular, React, Ember, Vue 등과 같은 대부분의 SPA 프론트 엔드에서 매우 쉽게 수행 할 수 있으며 주요 보너스입니다.
@jastend 문제는 아니지만 트 위치 (Twitch)가이 기능을 사용하는 방식을 아주 좋아합니다. 멋진 기능이었습니다. – firrae
트 위 치는 엠버 응용 프로그램이므로 단일 페이지 응용 프로그램입니다. "페이지"사이를 탐색 할 때 전체 페이지를 다시로드하지 않습니다. 브라우저의 탐색 버튼 사용과 관련하여 JavaScript 라우터는 browser history API을 이용하여 일반적인 탐색을 시뮬레이션합니다.
감사합니다. tiagohngl, 그것은 많이 설명합니다. – jastend
내 원래의 의견이 그렇게 많이 인기를 얻은 후에, 나는 내 추정을 조금 더 잘 설명 할 것이라고 생각했습니다.
트 위 치는 SPA 또는 단일 페이지 응용 프로그램입니다. 즉, 트 리뷰 웹 사이트에서 새로운 "페이지"로 이동하면 실제로 새 웹 페이지로 이동하지 않고 새로운보기를로드합니다. 이러한 각보기는 기본적으로 페이지처럼 보이지만 전체 페이지를 다시로드하지 않는 콘텐츠 섹션입니다. 이는 일반적으로 교차 플랫폼 모바일 앱에서 사용됩니다.
트위터의 장점은 그들이 백엔드와 끊임없이 소통하며 사이트에서 스트림과 잘 어울리는 점입니다. 최근 플래시에서 HTML5 동영상 플레이어로 전환했습니다. 현재 웹 사이트의 여러 섹션을 탐색하고 있어도 현재 스트림을 지속적으로 재생하는 것은 물론 주요 장점입니다.
이 단점은 브라우저가 컴퓨터에서보다 집중적 인 의미로 렌더링해야한다는 것입니다. 그리고 SEO가 SPA에 더 어려울 수 있음을 언급 할 가치가 있습니다.
트위치는 SPA이므로 다른 모든 스트림과는 별도로 비디오를로드 할 수 없으며 다른 스트림을 선택하면 비디오 피드의 소스가 변경됩니다. 그냥 생각. –
트위치가 어떻게 작동하는지 잘 모르겠지만 직접 작성해야한다면 완전히 새로운 페이지를로드하는 대신 본문 내용의 탐색 부분 만 변경되는 단일 페이지와 같은 솔루션을 사용합니다. – Shilly
@ Shilly 기본적으로 그것을 박 았어. YouTube와 마찬가지로 일반적으로 실제로 새 페이지를로드하지 않고 새로로드 된 페이지로 콘텐츠를 대체합니다. 트 위치는 거의 비슷한 것을합니다. –