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

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.

Précédemment, 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é les blobs, qui ensuite 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 à 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 la Range en-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 par l'appel de $('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. Quelqu'un a 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.

  • Je pense qu'ils ont utilisé MediaStream API mais jusqu'à présent, j'ai été trop paresseux pour étudier entièrement. Veuillez faire et laissez-moi savoir! =)
  • Différente de la MediaSource API....
  • Intéressant API, bien qu'il manque pas mal de choses qui seraient nécessaires (comme une façon de commencer), à moins que je suis en train de lire les choses de manière incorrecte. De toute façon, je ne travaille pas à l'entreprise pour laquelle je travaillais à l'endroit où j'étais réalisation de cette recherche et ne sais pas quand je reviendrais à ce genre de trucs 🙂
  • Ouais, peut-être que vous avez raison et il n'est pas compatible. Je n'ai pas bien étudier. Si vous ne pouvez pas non plus, je vais la garder sur la TODO.
  • avez-vous trouvé quelque chose depuis le post a été écrit?
InformationsquelleAutor KallDrexx | 2013-10-08
  1. 5

    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.

    • Intéressant, je vois une multitude de fichiers ajoutés à mon AppData\Local\Google\Chrome\User Data\Default\Cache de répertoire, et à en juger par le réseau de trafic de l'1.1 MO les fichiers vidéo morceaux. Maintenant, la question demeure sur la façon dont ils les coudre ensemble. Merci 🙂
    InformationsquelleAutor MilanSxD
  2. 4

    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);
    • Veuillez expliquer votre réponse, certains plus (peut-être en ajoutant de l'information à partir du lien que vous avez fourni). Lien-seules réponses sont découragés.
    • désolé,mon anglais est pauvre。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...
    • Si vous mettez que dans votre réponse, je vais revenir sur le downvote.
    • vous êtes un homme sérieux,pour que,mis à jour,lol
    InformationsquelleAutor vetch
  3. 3

    Youtube est à l'aide de cette fonction 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.

    InformationsquelleAutor Albi Patozi
  4. 3

    Bon, alors quelques choses que vous devez savoir, c'est que YouTube est basé sur ce grand open source Projet. Il se comporte de façon différente pour chaque navigateur et si votre navigateur prend en charge plus intensive de décodage comme WEBM, il va l'utiliser pour enregistrer Google bande passante. Aussi, si vous regardez ce Démo
    Ensuite, vous trouverez une section qui permet de télécharger l'intégralité de la vidéo dans un truc qui s'appelle "le stockage hors connexion". Je sais que chrome a elle et quelques autres navigateurs de ne pas tous les, dans certains cas, ils ont besoin d'utiliser la totalité de la vidéo, de la source au lieu d'une goutte. De sorte que le blob streaming en fonction de l'interaction de l'utilisateur avec la vidéo. Oui la vidéo est à seulement 1 fichier et ils ont les métadonnées de la vidéo que comme une petite base de données qui indique le temps de la vidéo et les points sur lesquels les morceaux peuvent être divisées en.

    Vous pouvez en savoir plus en lisant la documentation du Projet. Je recommande vraiment vous avez un oeil à la démo.

    InformationsquelleAutor Adminy