La vidéo html5 est lue deux fois (audio doublé) avec JQuery .append ()

Énorme WTF que j'ai pensé a un bug caché dans le semicomplex web app que je suis en train de faire, mais j'ai épluché vers le bas pour le code le plus simple possible, et il est toujours reproductibles dans Firefox, Chrome et Safari, de façon imprévisible, mais plus de la 1/2 du temps.

http://jsfiddle.net/cDpV9/7/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");
$("#player").append(v);
  1. Ajouter un élément vidéo.
  2. Vidéo commence à charger et jouer.
  3. Vidéo audio sonne comme il est doublé.
  4. Pause le visible de la vidéo et une piste audio continue.
  5. Supprimer l'élément vidéo; le fantôme de l'audio continue à jouer.
  6. Supprimer l'image, et le fantôme de l'audio s'arrête (même si, une fois dans Firefox, il a continué à jouer après la fermeture de la fenêtre, et ne pas s'arrêter jusqu'à l'abandon de Firefox).

Voici une capture d'écran peut-être de montrer que je ne suis pas complètement fou: http://www.youtube.com/watch?v=hLYrakKagRY

Il ne semble pas se produire lors de la prise de l'élément avec .html() au lieu de .append()c'est mon seul indice: http://jsfiddle.net/cDpV9/6/

$("#player").html("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");

Je suis sur OS X 10.6.7.

Je pense que je l'ai. Même juste de la création de l'objet JQuery sans l'ajouter à la page provoque le fantôme joueur à jouer: http://jsfiddle.net/cDpV9/8/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-banjo-360.webm' autobuffer='auto' preload autoplay controls></video>");

Pour l'instant je peux contourner cela en utilisant .html(). Je vais signaler la question à JQuery.

source d'informationauteur forresto | 2011-05-08

  1. 10

    Peut-être que jQuery met en cache le contenu de $() avant d'ajouter à votre lecteur div? Donc, il est un autre exemple de la balise vidéo. Il pourrait être une erreur dans jQuery. Avez-vous essayé sans Jquery/js?

  2. 6

    Je voudrais essayer d'ajouter l'attribut autoplay après vous ajoutez le lecteur vidéo. Ceci devrait alors instancier la fonction de lecture.

    Qui serait quelque chose comme ceci:

    var v = $("<video id='v' src='videofile.webm' autobuffer='auto' preload controls></video>");
$("#player").append(v);
v.attr('autoplay','autoplay');

    Lorsque vous créez des éléments en JavaScript c'est à dire des éléments de l'image, des objets, etc, ils sont chargés instantanément et stockées dans la mémoire comme des objets. C'est pourquoi vous pouvez précharger les images avant de charger une page. Il n'est donc pas un bug jQuery.

    Ref: http://www.w3.org/TR/html5/video.html#attr-media-autoplay

    Lorsqu'il est présent, l'agent de l'utilisateur (tel que décrit dans l'algorithme décrit
    dans les présentes) commence automatiquement la lecture de la ressource des médias comme
    dès qu'il peut le faire sans s'arrêter.

  3. 5

    J'ai eu le même problème ici. Cela semble être un problème avec l'utilisation de la "lecture automatique" attribut sur votre vidéo de balisage.

    • Supprimer l'attribut autoplay
    • ajouter votre vidéo DOMNode à n'importe quel nœud
    • si vous souhaitez que la lecture automatique de comportement, appelez videodomnode.play() - à l'aide de jquery, ce serait $('video')[0].play()
  4. 1

    Vous pourriez obtenir le code html de #player et à ajouter la vidéo à votre auto, puis ajouter le total avec .html() comme ceci:

    var v = $("#player").html() + "<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>";
$("#player").html(v);

    Il n'est pas aussi bon que le .append() fonction, mais si le .append() ne fonctionne pas, vous pourriez être forcé de faire quelque chose comme ça.

  5. 0

    Ce celui qui a le mieux fonctionné dans mon cas:

    var v = '<audio hidden name="media"><source src="text.mp3"><\/audio>';
$('#player').append(v);
$("audio")[$('audio').size()-1].play();
  6. 0

    J'ai résolu le mien par le chargement de la vidéo après le dom chargé:

    $(window).bind("load", function() {
  var v = $("<video id='bgvid' loop muted>
              <source src='/blabla.mp4'  type='video/mp4'>
              </source> 
             </video>");
$(".video-container").append(v);
v.attr('autoplay','autoplay');  
});