Comment Youtube lecteur vidéo HTML5 de contrôle de la mise en mémoire tampon?

Question

Je regardais une vidéo sur youtube et j'ai décidé d'enquêter sur certaines parties de son lecteur vidéo. J'ai remarqué que contrairement à la plupart des vidéo HTML5 j'ai vu, une vidéo de Youtube joueur ne fait pas une vidéo normale de la source et utilise au lieu de cela, un blob url de la source.

Auparavant, j'ai testé les vidéos HTML5 et j'ai trouvé que le serveur démarre la diffusion de la vidéo en entier dès le début et tampons en arrière-plan le repos complet de la vidéo. Cela signifie que si votre vidéo est de 300 mégas, tous les 300 mo à télécharger. Si vous cherchez à le moyen, il va commencer à télécharger à partir de la position de recherche tout le chemin à la fin.

Youtube ne fonctionne pas de cette façon (au moins dans chrome). Au lieu de cela, il parvient à contrôler de mise en mémoire tampon et donc il tamponne un certain montant, en pause. Il semble également tampon uniquement les éléments pertinents, de sorte que si vous sauter il fera en sorte de ne pas le tampon de pièces qui ne sont pas susceptibles d'être regardé.

Dans mes tentatives pour enquêter sur la façon dont cela a fonctionné, j'ai remarqué que la vidéo src de la balise a une valeur de blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54, qui m'a signalé gouttes, puis qui m'a conduit à tableaux typés. L'utilisation de ces ressources, je suis en mesure de charger une vidéo mp4 en un blob et l'afficher dans une balise vidéo HTML5.

Cependant, ce que je suis maintenant coincé sur est de savoir comment Youtube traite avec les morceaux. En regardant le trafic réseau, il semble envoie des demandes d' http://r6---sn-p5q7ynee.c.youtube.com/videoplayback qui renvoie binaire des données vidéo retour en morceaux de 1.1 mo. Il semble également intéressant de noter que la plupart des demandes normales en raison de la vidéo HTML5 demandes semblent recevoir une 206 code de réponse de dos alors qu'elle diffuse, encore youtube playvideo appels d'obtenir un 200.

J'ai essayé de tenter de charger uniquement une plage d'octets (via le réglage de l' Range - tête http) qui ont malheureusement échoué (je suppose car il n'y a pas de méta-données pour la vidéo à venir avec la vidéo).

À ce point, je suis coincé à comprendre la manière de Youtube accomplit ce. Je suis venu avec plusieurs idées mais rien de qui je suis totalement vendu sur:

1) Youtube est à envoyer les auto-contenus vidéo et audio des morceaux avec chaque /videoplayback appel. Cela semble être une très lourde charge pour le télécharger et il me semble qu'il serait difficile de les coudre ensemble pour le faire apparaître comme il est un sans heurt de la vidéo. Aussi, la balise vidéo semble penser que c'est une vidéo complète, à en juger à partir de l'appelant $('video').duration et $('video').currentTime, ce qui m'amène à croire que la balise video pense que c'est un seul fichier vidéo. Enfin, la vidoe src de la balise ne change jamais, ce qui me fait croire qu'il travaille avec un singulier blob et pas de commutation de gouttes.

2) Youtube constructions vide blob avant à la taille de la vidéo complète de tableau et les mises à jour de la goutte avec des morceaux comme il le télécharge. Il serait alors assurez-vous que l'utilisateur n'a pas reçu de trop près à la dernière téléchargé pièce (pour empêcher l'utilisateur d'entrer un undownloaded section de la goutte). Le problème que je vois avec ce que je ne vois pas de moyen de mise à jour dynamique d'une goutte à l'aide de javascript (bien que peut-être je suis juste de la difficulté à googler pour elle)

3) Youtube télécharge les méta-données, et commence alors la construction de la goutte dans l'ordre par l'ajout de la vidéo morceaux qu'il télécharge. Le problème que je vois avec cette méthode c'est que je ne comprends pas comment il pourrait gérer cherche en post-buffered territoire.

Peut-être que je"m manque juste une réponse évidente qui est juste en face de moi. N'importe qui ont des idées?

---

edit: je viens de penser à une quatrième option. Une autre idée est qu'ils pourraient utiliser le fichier API pour écrire le binaire morceaux d'un fichier et utiliser le fichier de diffuser hors de. Le fichier API semble avoir la capacité de demander à des postes précis, donc ce qui permet de combler une vidéo avec vide d'octets et de les remplir à mesure qu'ils sont reçus. Ce serait sans aucun doute accueillir vidéo cherchant ainsi.

Answer 1

Quand vous regardez la AppData de GoogleChrome, pendant la lecture d'une vidéo sur youtube, vous verrez que c'tampons en segmenté fichiers. Les vidéos téléchargées sur youtube sont segmentés, qui est pourquoi vous ne pouvez pas parfaitement identifier à une période dans le premier clic sur la barre, si ce délai est à l'extérieur du segment en cours.

Le nombre de segments dépend de la longueur de la vidéo, et le moment où vous commencez et arrêtez la lecture de la vidéo.

Lorsque vous êtes lié à un délai d'une vidéo, il va simplement ignorer la mise en mémoire tampon des segments qui viennent avant ce délai.

Malheureusement, je ne sais pas beaucoup sur le codage pour la lecture vidéo, mais j'espère que cela vous mène dans la bonne direction.

Milan

Answer 2

il y a une toile de l'élément dans la page ,Peut-être que Cela Aidera http://html5doctor.com/video-canvas-magic/

nous savions que la vidéo est segmenté,la question est de savoir comment les assembler ensemble.je pense que le vrai élément de vidéo ne fait pas dans la pièce de travail,le support de la source de données,et en tirer les seagments chaque trame de la toile élément。

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 3

Youtube est l'utilisation de cette fonctionnalité uniquement dans les navigateurs qui supportent Media Source Extensions c'est au navigateur de décider sur tout le reste à cause de cette caractéristique.