html5 (youtube) video tag erklärung

Question

Ich muss einige videos auf meiner website hosten. Ich habe geschaut, wie Youtube es macht, aber ich verstehe die Videoquelle nicht. Unten ist das Video-Tag in Youtube. Die Quelle ist ein Blob, warum? Was bedeutet die URL? Wie funktioniert es? Wie kann ich das Gleiche machen?

<div class="html5-video-container" data-layer="0"> 
    <video tabindex="-1" class="video-stream html5-main-video" 
    style="width: 640px; height: 360px; left: 0px; top: 0px; opacity: 1;" 
    src="blob:https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd"> 
    </video> 
</div> 

Vielen Dank im Voraus.

Answer 1

YouTube verwenden MediaSource Extensions (MSE) in Firefox die src wird aussehen wie "mediasource: https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd" Um MediaSource zu verwenden, müssen Sie Ihr Video im MPEG-Dash-Format conwert. Dies bedeutet, dass das Video in mehrere Dateien aufgeteilt wird. Einer von ihnen (Metadatendatei .mp4) wird Moov-Atom und andere (.m4s) Moof- und MDAT-Atome enthalten. Sie können dies mit ffmpeg erreichen und im Browser mit xmlhttprequest oder webSocket herunterladen. Sie können auch den Blob verwenden ist ein kleines Beispiel:

\t xhr.open('GET', "http://localhost:1313/1.mp4", true); 
 
\t xhr.responseType = 'arraybuffer'; 
 
\t xhr.onload = function(){ 
 
\t \t file = new Blob([ new Uint8Array(xhr.response) ], {type: 'video/mp4'}); 
 
\t \t document.querySelector("video").src = URL.createObjectURL(file); 
 
\t \t } 
 
\t xhr.send();