Vidéo HTML5: force d'annulation de la mémoire tampon

comment forcer un événement d'annulation sur une vidéo HTML5? J'ai une superposition, où, quand je la ferme, la vidéo doit faire une pause de lecture et puis stop buffering . Cependant, ma connexion internet continue de devenir folle. J'utilise Chrome 7.0.5 sur Mac OS X 10.6.

j'ai essayé deux ou trois choses -- aucune n'a fonctionné:

(pour ceux qui ne connaissent pas XUI, x$ est comme la fonction d'emballage jQuery)

d'abord, envoi D'un événement HTML d'annulation: 

var videoEl = x$('#video_el')[0];
videoEl.pause();
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent('abort', false, false);
videoEl.dispatchEvent(evObj);

ensuite, changer le src puis forcer une charge: 

var videoEl = x$('#video_el')[0];
videoEl.pause();
videoEl.src = "";
videoEl.load(); //tried with and without this step

EDIT: mon élément vidéo ressemble à quelque chose comme ceci: 

<video id="video_el" src="<video_url>" preload="none" controls="controls" />

encore une fois, rien de tout cela ne fonctionne. Quelqu'un rencontré ce problème avant? Toutes les suggestions?

en résumé, j'essaie de forcer un élément vidéo HTML5 à arrêter de tamponner.

Merci!

45
demandé sur Brad Swerdfeger 2010-11-01 21:27:44

5 réponses

Ok, donc pour les derniers jours j'ai vraiment été aux prises avec ce problème.

Voici mon analyse et ma solution:

en bref le problème que j'ai essayé de résoudre:

J'ai remarqué que le lecteur HTML5 n'arrête pas de télécharger lorsque le lecteur est en pause (pas même après un temps raisonnable). Travailler avec un flux audio 24/7 et le développement d'un site web mobile je me suis rendu compte que c'est loin d'être optimal pour mon les visiteurs considérant l'utilisation élevée de données si elles laissent le site ouvert - bien que je pense que je ferais un certain telco très heureux en "oubliant" cette question...

Juste pour clarifier, Je ne me soucie pas vraiment des fichiers avec une longueur fixe. Télécharger le fichier complet est la plupart du temps une fonctionnalité requise pour visualiser les ressources en ligne (pensez connexion lente) donc pas quelque chose que j'ai essayé d'empêcher.

analyse:

L'audio HTML5 l'élément n'a pas de fonction stop (), il n'a pas non plus d'option où vous pouvez définir la quantité de données qu'il est autorisé à tamponner, ou une façon de dire que vous voulez que l'élément cesse de tamponner - ne confondez pas cela avec la fonction 'preload', cela ne s'applique qu'à l'élément avant que le bouton play soit cliqué.

Je n'ai aucune idée de pourquoi c'est et pourquoi cette fonctionnalité n'est pas disponible. Si quelqu'un peut m'expliquer pourquoi ces deux fonctions ne sont pas implémentées dans une norme cela devrait rendre le développement web pour les téléphones mobiles meilleur et plus standardisé, je voudrais savoir.

Solution:

La seule solution que j'ai trouvée pour implémenter une fonction (sorte de) stop dans votre élément audio est la suivante:

1. Pause du lecteur actuel - vous pouvez brancher l'événement pause sur le lecteur via l'audio.addEventListener ('pause', yourFunction);

2. Réglez la source sur empty-audio.src = "";

3. Chargez le src-audio.charge ();

4. Supprimer tout l'élément audio

5. Insérer un nouvel élément audio HTML5 sans la source définie

6. Définissez la source (la source qui était là en premier lieu) - audio.src = "vieux url de la source de

7. Rehook l'évènement pause - audio.la méthode addEventListener ("pause", le courant de la fonction);

Completely l'injection d'un nouveau lecteur audio HTML5 est nécessaire pour iOS. Il suffit de réinitialiser le src et ensuite de le charger pour que le lecteur 'autoplay' dans mon cas...

pour les personnes paresseuses (y compris jQuery): 

var audio = $("audio").get(0);
audio.pause(0);
var tmp = audio.src;
audio.src = "";
audio.load();
$("audio").remove();

$("#audio-player").html("<audio controls preload='none'></audio>");<br>
audio = $("audio").get(0);
audio.src = tmp;
audio.addEventListener('pause', current-function);

appuyer sur pause fera perdre à votre visiteur l'emplacement actuel dans le fichier audio/vidéo et il recommencera. Je n'ai pas de solution pour ce problème. Encore une fois, si vous avez affaire à un flux en direct ce la solution devrait aller.

Espérons que cette aide.

47
répondu Ruben 2012-11-09 05:39:41

avec preload=" none", c'est comme ça que j'ai fait avorter le buffer après avoir mis la vidéo en pause, et puis j'ai repris la lecture à l'emplacement de la pause en utilisant jQuery. 

<video id="video_el" src="<video_url>" preload="none" controls="controls" />    

<script>
jQuery(function() {

  var video = jQuery('video').get(0);

  video.addEventListener('pause',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
  });

});
</script>
8
répondu Eric Leroy 2015-12-03 06:25:33

voir ici: http://dev.w3.org/html5/spec/video.html#attr-media-preload

peut-être pourriez-vous mettre preload à none ?

dans le cas où cela ne fonctionne pas: Pouvez-vous récupérer ses attributs, l'enlever, insérer un nouvel élément vidéo et donner à cet élément les attributs sauvegardés?

0
répondu thejh 2010-11-01 18:43:50

en fait, vous pouvez faire la même chose en définissant l'attribut src comme un fichier php/aspx avec quelques paramètres pour lire le contenu du fichier et récupérer les données comme le type équivalent(par exemple, Content-Type: video/mp4 ). Mais il ne fonctionne pas dans IE 11 (quelle surprise :D), alors vous aurez besoin de faire le tour ci-dessus juste pour ce navigateur magnifique.

utilisez ceci... 

<video id="v1" preload="none">
  <source src="video.php?id=24" type="video/mp4">
</video>

au lieu de ça... 

<video id="v2" preload="none">
  <source src="video-24.mp4" type="video/mp4">
</video>

Comme un inconvénient, vous ne serez pas capable de déterminer la longueur totale de la vidéo, mais pour résoudre ce problème, ce n'est pas si grand, vous pouvez stocker cette valeur dans votre base de données ou tout simplement faire un autre petit truc.

j'ai testé en utilisant Chrome 32, Firefox 26, Opera 18 et IE 11 le script suivant 

setInterval(function() {
    var r = [];

    try {
        r.push(v1.buffered.end(0));
    } catch(e) {
        r.push('nahh');
    };

    try {
        r.push(v2.buffered.end(0));
    } catch(e) {
        r.push('second nahh');
    };

    console.log(r.join(', '));
}, 500);

dans mes tests localhosts...

Firefox 26 après que vous ayez appuyé sur play, il a toujours tamponné le dossier complet.

IE 11 (considérant src="video-24.mp4" , parce que l'autre ne fonctionne pas) après que vous ayez appuyé sur play, il a toujours tamponné le morceau de fichier morceau par morceau même s'il a été mis en pause et ignore complètement l'attribut preload="none" .

Chrome 32 Fonctionne parfaitement (même pour Opera 18).

0
répondu Nevershowmyface 2014-01-21 15:23:46

l'étape clé semble être et non mettre src à une valeur vide avant d'appeler load() . J'ai eu du succès en le faisant comme ça: 

var wasPlaying = !audioPlayer.paused;
audioPlayer.currentTime = 0.0; // Optional -- can be left out for pause
audioPlayer.pause();

if (wasPlaying) { // This prevents the browser from trying to load the entire source
    audioPlayer.load();
}

dans Chrome et Firefox sur Win10, cela déclenche un événement d'annulation. Dans mon cas précis, cela était nécessaire pour fermer les sockets qui autrement resteraient ouverts indéfiniment, ce qui a conduit à frapper la limite de six connexions par serveur avec plusieurs lecteurs utilisés sur la même page.

0
répondu Dinfinity 2018-04-11 10:27:51