🛰 Youtube 비디오 포함에 Pip 사용

TL;의사: 그럴 리가 없어요.이제 그만 포기해.
그래서 너는 너의 사이트에서 유튜브 동영상을 위탁 관리하고 싶다, 그렇지?다행이다.인터넷은 바로 이런 유형의 물건을 위해 발명된 것이다.유튜브는 그것을 매우 간단하게 만든다.당신이 해야 할 일은 영상 아래의 공유 단추를 누르고 끼워넣기를 선택하고 Html 코드를 복사한 다음에 보는 것입니다.iframe (미니 홈페이지) 에 삽입된 유튜브 동영상을 사이트에서 공유할 수 있습니다.짐 버너스 리는 자부심을 느낄 것이다.

잠깐만, 그게 뭐야?사용자가 동영상을 볼 때 프로그램을 계속 사용할 수 있도록 플로팅 창에서 재생 기능을 사용하시겠습니까?내 친구, 여기가 바로 너의 운이 고갈되기 시작한 곳이다.하지만 너무 걱정하지 마세요. 제가 이 불행한 여정에서 당신의 방향을 인도할 테니까요.
어디서부터 시작할까요?우리는 이미 iframe에 유튜브 영상을 삽입했다.그것을 한 페이지 위에 놓읍시다.

불행하게도, 비디오 컨트롤에 pip 단추가 없습니다.나는 공교롭게도 네가 동영상을 오른쪽 단추로 클릭하면 상하문 메뉴를 볼 수 있고 그림 그리기 창에서 동영상을 열 수 있다는 것을 알게 되었다.그러나 사용자가 동영상을 오른쪽 단추로 클릭하고 pip를 선택해야 한다는 것을 발견하기를 기대할 수는 없다.귀신이 곡할 노릇이다. 만약 그것이 그들 앞에 있다면, 우리는 그들이 작은 단추를 찾을 수 있을 것이라고 거의 기대할 수 없다.
비디오를 다시 오른쪽 단추로 눌렀지만 이번에는 inspector 도구를 엽니다.Html에 숨겨진 pip 버튼을 찾을 수 있는지 확인하세요.여기에 힌트가 하나 있는데, 그것은 전체 화면 단추 옆에 숨겨져 있다.만약 우리가 단추에서 display:none 내연 스타일을 전환한다면, 우리는 그것을 표시할 수 있습니다.

단추에 클래스 선택기가 있기 때문에, 페이지에 쉽게 CSS 규칙을 추가해서 표시할 수 있어야 합니다.

.ytp-pip-button { display: inline; }

그러나 이것은 작용하지 않는다. 원인은 몇 가지가 있는데, 우리는 뒤에서 토론할 것이다.이제 iframe 요소를 살펴보고'allow'속성에 주목합시다.

<iframe allow="picture-in-picture; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope" src="https://www.youtube.com/embed/3vBwRfQbXkg" title="YouTube video player" frameborder="0" width="560" height="315" allowfullscreen></iframe>

이 속성은 그림의 단어picture를 포함합니다.그림 속의 그림은 바로 우리가 노력하여 실현하는 목표이다.그럼 여기 질문이 뭐예요?아마도 우리는 유튜브의 문서를 보아야 할 것이다.걱정하지 마세요. 우리는 단지 그림 속의 그림과 관련된 내용을 보기만 하면 됩니다.문서를 철저하게 검사한 후에 우리는 그림에 그림이 언급되지 않은 것을 발견했다. (다시 한 번 보시기를 권장합니다.)이제는 구글에 가서 더 많은 선택을 구할 때가 되었다.
우리의 선택은 유튜브 동영상 삽입을 지원하는 Plyr라는 팝 라이브러리입니다.그것들은 또한 그림 속의 그림을 지지한다.준비해 봅시다.

이것은 효과가 없는 것 같다.나는 이 라이브러리가 우리를 위해 유튜브 pip 방송을 처리할 것이라고 기대할 수 없다고 생각한다.인터넷상에서도 이 점을 해낼 수 있는 다른 도서관은 없을 것 같다.하지만 우리는 쉽게 놀라 쓰러지지 않는다.만약 다른 사람이 이렇게 하지 않는다면, 우리는 스스로 길을 열기만 하면 된다.
이것은 게임 계획이다.우리는 pip 버튼이 유튜브 iframe의 전체 화면 버튼 옆에 숨겨져 있다는 것을 안다.만약 우리가 버튼을 어떤 방식으로 나타낼 수 있다면.또는 우리는 이 단추를 완전히 돌려서 명령을 누르면 pip를 열 수 있다. 이런 상황에서 우리는 자신의 단추를 만들 수 있다.

나는 이미 세 편의 Stack Overflow 게시물을 정리했는데, 그것들은 우리의 목표를 향해 내딛는 희망적인 걸음인 것 같다.

Youtube iframe picture-in-picture mode

Post message to Youtube iframe

Show Youtube video source in html5 video tag

첫 번째는 pip를 선택할 때 오른쪽 단추를 누르는 옵션입니다. 우리는 이미 알고 있습니다.동원 정책 때문에 iframe에서 외부에 삽입하여 프로그래밍 방식으로 pip를 터치할 수 없습니다.그러나 우리는 잠시 이 점을 소홀히 한다.마지막으로 언급한 것은 Html 영상 요소 띠video.requestPictureInPicture() 방법이다.비록 우리가 직접 영상 요소를 사용하지는 않았지만 iframe 요소 중에는 영상 요소가 하나 있다.만약 우리가 그것을 찾을 수 있다면...

그래, 우리가 뭘 배웠지?누가 신경 쓰겠는가, 관건은 우리가 이 아름다운 iframe에서 어떤 함수도 실행하지 않는다는 것이다.아쉽습니다. 왜냐하면...잠깐만, 이거 우리 아이프람이야?기술적으로 유튜브의 것이다. 왜냐하면 우리는 그 어떠한 코드도 실행할 수 없기 때문이다.그래서 우리는 정말 유튜브를 초대해서 우리 홈페이지에 좋은 자리에 앉았다.
어쩌면 우리는 어떤 방식으로 이 일을 설계할 수 있을지도 모른다.우리는 pip 단추를 CSS로 표시하려고 했지만 성공하지 못했다.실제로, 우리는 iframe이 아닌 웹 페이지의 CSS를 설정하려고 한다.iframe은 "단독"페이지이기 때문에 CSS를 설정해야 합니다.왠지 모르겠다.우리는 iframe에 자바스크립트를 주입해서 코드를 실행할 수 없지만, CSS는 틀림없이 문제가 되지 않습니까?내 말은 스타일 변화가 가장 많이 할 수 있는 게 뭔지.구글의 어떤 사람은 반드시 크로스 인터페이스 iFrame 스타일화된 해결 방안을 가지고 있어야 한다.
나는 여기서 시간을 좀 절약하고 싶다. 단지 CSS를 주입하는 계획은 매우 큰 금기라고 말할 뿐이다.같은 크로스 스크립트 문제입니다.구체적으로 말하면, 창 프레임 사이에서 데이터에 접근하기 위해서는 프레임에 같은 도메인 이름, 포트, 프로토콜이 있어야 한다.그렇지 않으면 해커들의 하루가 될 것이다.예를 들어 한 사이트는 사용자가 iframe에 은행에 로그인하도록 강요하고 로그인하면 이 프레임워크에서 사용자의 모든 은행 정보를 훔칠 수 있다.

여기에 미친 생각이 하나 있다.iframe는 우리 것이 아니에요, 그래요?유튜브에 링크했기 때문이다.그렇습니까?링크되면 Windows를 통해서만 메시지를 보낼 수 있습니다.소인메시지는 Youtube나 iframe에 메시지 탐지기를 가지고 우리의 명령을 수신하고 실행하도록 요구합니다.Youtube는 API 문서에 나열되지 않은 명령에 관심이 없기 때문에 pip을 이런 식으로 열기를 원하지 않습니다.하지만 만약에...만약 우리가 유튜브에 대한 소유권을 포기하기 전에 자신의 정보 탐지기를 iframe에 추가하면 어떻게 될까요?이렇게 하면 비디오 요소를 찾고 Request Picture InPicture()를 호출하기 위해 iframe에 명령을 보낼 수 있습니다.또는, 메시지 처리 프로그램은 여기에서 너무 까다롭지 않게 pip 단추를 숨길 수 있습니다.
나는 네가 일의 결말을 알고 싶다.브라우저는 우리의 천진난만한 코드 주입 시도에 의해 우롱당하지 않을 것이다.만약 우리가 코드를 iframe에 주입시키려는 것이 아니라, 프로그래밍을 통해 영상을 오른쪽 단추로 클릭하고, 상하문 메뉴를 열어 사용자에게 그림 속의 그림을 선택하도록 시도할 수 있다.하지만 나는 많은 안전 문제가 이 점을 막았다고 믿는다. (물론 내가 해 봤기 때문이다.)
걱정하지 마라, 우리의 선택은 아직 다 쓰지 않았다.내가 정리한 목록에서 세 번째 Stack Overflowpost는 유튜브 영상을 영상 요소 라벨에 직접 불러오는 것을 언급했다.그것은 구글에 동영상 흐름 URL 요청을 보내서 이를 실현한다.url은 다음과 같습니다.

https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...

그런 다음 비디오 요소의 src를 이 흐름 URL로 설정하고 Request Picture InPicture()를 호출할 수 있습니다.

Stack Overflowpost의 작성자는 흐르는 URL을 검색하기 위해 패키지를 작성했다.그러나 이 패키지는 신뢰할 수 없는 흐름 URL을 검색하기 위해 역 프록시 서버 (yt2html5.com) 에 요청을 보냈다.우리가 아는 바에 의하면, 그것은 갑자기 우리 사용자를 색정적인 흐름으로 인도하기 시작할 것이다.따라서 스트림 URL(우리가 설정한 서버 사용)을 직접 요청해야 합니다.아니면 구글에 원본 영상 데이터를 요구해 자체로 영상을 전송할 수도 있다.
이 점에서 우리는 그의 엄마의 유튜브와 피프에게 가자고 한다.그렇게 지도 모른다, 아마, 아마...
나는 여기서 이 문장을 끝낸다.나의 첫 번째 기술 블로그는 어떤 것도 전혀 가르치지 않는다. 이것은 매우 적합하다.적어도 한 가지 일도 이루지 못했거나다음에 저와 함께 클라이언트에서 Youtube 동영상의 제목/작성자를 검색하는 데 어려움을 겪을 것입니다. (TL; DR: Google API 키를 등록하고 역 프록시 서버를 설정할 필요가 없습니다. 등록되지 않은 YT.player.getVideoData 방법을 호출하기만 하면 됩니다.)