YouTube의 HTML5 동영상 플레이어가 어떻게 버퍼링을 제어합니까?

Question

YouTube 동영상을보고 있었는데 동영상 플레이어의 일부를 조사하기로 결정했습니다. YouTube에서 사용한 대부분의 HTML5 동영상과 달리 Youtube의 동영상 플레이어는 일반적인 동영상 소스를 제공하지 않으며 대신 BLOB URL을 소스로 사용합니다.

이전에 나는 HTML5 비디오를 테스트했으며 서버가 시작부터 전체 비디오를 스트리밍하기 시작하고 전체 비디오의 나머지 부분을 배경으로 버퍼링하는 것으로 나타났습니다. 즉, 동영상이 300 메가이면 300 메가가 모두 다운로드됩니다. 중간을 찾으면 탐색 위치에서 끝까지 다운로드가 시작됩니다.

Youtube는 (적어도 크롬에서는)이 방식으로 작동하지 않습니다. 대신 버퍼링을 제어하여 일시 중지 된 상태에서 특정 양을 버퍼링합니다. 또한 관련 조각 만 버퍼링하는 것처럼 보이므로 주위를 건너 뛸 경우 감시가 어려울 수있는 조각을 버퍼하지 않도록합니다.

이것이 작동하는 방식을 조사하려는 시도에서 비디오 src 태그의 값이 blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54이고 blobs이라고 지적 했으므로 나를 typed arrays으로 안내했습니다. 이 두 리소스를 사용하여 mp4 비디오를 BLOB에로드하고 HTML5 비디오 태그에 표시 할 수 있습니다.

그러나 지금 내가 붙어있는 것은 유튜브가 조각을 다루는 방법입니다. 네트워크 트래픽을 살펴보면 http://r6---sn-p5q7ynee.c.youtube.com/videoplayback에게 이진 비디오 데이터를 반환하는 요청이 1.1MB의 청크로 되돌아 오는 것으로 보입니다. 또한 HTML5 비디오 요청으로 인한 대부분의 일반적인 요청은 스트리밍하는 동안 206 응답 코드를 수신하는 것처럼 보이지만 youtube의 playvideo 호출은 200 바이트를 반환합니다.

불행하게도 실패한 (비디오에 들어오는 메타 데이터가 없기 때문에) http 헤더를 설정하여 (URL을로 설정하여) 바이트 범위를로드하려고했습니다.

이 시점에서 나는 Youtube가 이것을 어떻게 수행하는지 알아내는 것에 매달 렸습니다. 어느 것도 완전히 판매되었지만 몇 가지 아이디어가 떠올랐다.

1) Youtube는 각각 /videoplayback 전화와 함께 자체 포함 된 비디오 및 오디오 청크를 보내고있다. 이것은 업로드 측면에서 꽤 부담스러운 것 같아 보이지 않는 비디오처럼 보이게하기 위해 이들을 꿰매기가 어려울 것 같습니다. 또한 동영상 태그는 $('video').duration과 $('video').currentTime으로 전화를 걸면 하나의 전체 동영상이라고 생각하는 것 같습니다. 동영상 태그가 단일 동영상 파일이라고 생각하게 만듭니다. 마지막으로, vidoe src 태그가 변경되지 않아서 단 하나의 blob로 작동하고 blob을 전환하지 않는다고 믿게합니다.

2) Youtube는 전체 비디오 배열에 맞게 크기가 조정 된 빈 BLOB를 구성하고 BLOB를 다운로드 할 때 조각으로 BLOB를 업데이트합니다. 그런 다음 사용자가 마지막으로 다운로드 한 부분에 너무 가까워지지 않았는지 확인합니다 (사용자가 BLOB의 다운로드되지 않은 섹션을 입력하지 못하도록합니다). 내가 볼 수있는 문제는 동적으로 자바 스크립트를 통해 blob을 업데이트하는 방법이 없다는 것입니다. (어쩌면 단지 문제가 생겼습니다.)

3) Youtube가 메타 데이터를 다운로드 한 다음 생성을 시작합니다. 비디오 조각을 다운로드 할 때이를 추가하여 순서대로 blob을 만듭니다. 이 방법으로 볼 수있는 문제는 버퍼링 된 영역에서 검색을 처리하는 방법을 이해하지 못한다는 것입니다. .

은 어쩌면 내가 "바로 내 앞에있는 명백한 대답을 실종 누구나 어떤 아이디어를 가지고

---

편집 : 난 그냥 네 번째 옵션을 생각했다.또 다른 아이디어는 파일 API를 사용하여 바이너리 청크를 파일에 쓰고 그 파일을 스트리밍 할 수 있다는 것입니다. 파일 API는 특정 위치로 탐색 할 수있는 기능을 갖고있어 빈 바이트가있는 비디오를 채우고 수신 할 때 채울 수 있습니다. 이것은 비디오 검색을 확실히 수용 할 것입니다.

Answer 1

Google 크롬의 AppData를 살펴보면 YouTube 동영상을 재생하는 동안 세그먼트 화 된 파일로 버퍼링되는 것을 확인할 수 있습니다. YouTube에 업로드 된 동영상은 분할되어 있기 때문에 시간대가 현재 세그먼트 외부에있는 경우 막대를 처음 클릭 할 때 시간 프레임을 정확히 찾아 낼 수 없습니다.

세그먼트의 양은 비디오의 길이와 비디오 재생을 시작하고 중지하는 시간에 따라 다릅니다.

비디오의 시간 프레임에 링크되어 있으면 해당 시간 프레임 이전의 세그먼트를 버퍼링하지 않습니다.

불행히도 비디오 재생 코딩에 대해 많이 알지는 못하지만 올바른 방향으로 안내해주기를 바랍니다.

Answer 2

Youtube는 Media Source Extensions를 지원하는 브라우저에서만이 기능을 사용하므로 브라우저가이 기능으로 인해 나머지는 모두 결정합니다.

Answer 3

페이지에서 캔버스 요소가, 어쩌면 이것은 우리가 분할되어있는 비디오를 알고 http://html5doctor.com/video-canvas-magic/

도움이 될 것입니다, 문제는 실제 비디오 요소는하지 않습니다 생각 뭉쳐야를 스티치하는 방법입니다 재생 작업은,이 데이터 소스를 지원하고, 캔버스 요소에 seagments 각 프레임을 그립니다. 당신이 알아야 할

var v = document.getElementById('v'); 
var canvas = document.getElementById('c'); 
v.addEventListener('play', function(){ 
    if(v.paused || v.ended) return false; 
    c.drawImage(v,0,0,w,h); 
    setTimeout(draw,20,v,c,w,h); 
},false); 

---

Answer 4

좋아, 몇 가지 유튜브는이 위대한 오픈 소스을 기반으로한다는 것입니다. 브라우저마다 다르게 동작하며 브라우저가 WEBM과 같이 집중적 인 디코딩을 지원하면 브라우저에서 Google의 대역폭을 절약 할 수 있습니다. 또한 당신이 이것을 보는 경우 Demo 그러면 전체 비디오를 "오프라인 저장 장치"로 다운로드하는 섹션을 찾을 수 있습니다. 나는 크롬이 그것을 가지고 있다는 것을 알고있다. 그리고 어떤 다른 브라우저들은 블롭 대신에 전체 비디오 소스를 사용해야하는 경우도있다. 따라서 BLOB는 사용자 상호 작용에 따라 스트리밍됩니다. 예, 동영상은 단지 하나의 파일이며 동영상의 시간과 청크가 나눌 수있는 지점을 알려주는 작은 데이터베이스처럼 해당 동영상에 대한 메타 데이터가 있습니다.

자세한 내용은 프로젝트 설명서를 참조하십시오. . 데모를보실 것을 권 해드립니다.