html5 riproduzione video due volte (audio raddoppiata) con JQuery .append()

Question

Enorme WTF che ho pensato fosse un bug nascosto nello semicomplex web app che sto creando, ma l'ho ridotto al codice più semplice possibile, ed è ancora replicabile in Firefox, Chrome e Safari, in modo imprevedibile ma più della metà del tempo.

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. Aggiungere un elemento video.
2. Il video inizia a caricare e riprodurre.
3. L'audio del video sembra essere raddoppiato.
4. Mettere in pausa il video visibile e una traccia audio continua.
5. Elimina l'elemento video; l'audio fantasma continua a suonare.
6. Elimina il fotogramma e l'audio fantasma si arresta (anche se una volta in Firefox ha continuato a giocare dopo aver chiuso la finestra, e non si è fermato fino a quando non si è chiuso Firefox).

Ecco una cattura dello schermo per mostrare forse che io non sono completamente pazzo: http://www.youtube.com/watch?v=hLYrakKagRY

Non sembra questo accada quando si effettua l'elemento con .html() invece di .append(), in modo che il mio unico indizio: 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>"); 

sono su OS X 10.6.7.

---

Penso di averlo. Anche solo la creazione dell'oggetto JQuery senza inserirlo nella pagina fa sì che il giocatore fantasma di giocare: 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>");

Per ora posso ovviare a questo utilizzando .html(). Segnalerò the issue a JQuery.

Answer 1

Forse jQuery memorizza nella cache il contenuto di $() prima di aggiungerlo al div del lettore? Quindi c'è un'altra istanza del tag video. Potrebbe essere un errore in jQuery. Hai provato questo senza Jquery/js?

Answer 2

Si potrebbe ottenere il codice html di #player e aggiungere il video la vostra auto, quindi aggiungere il totale con .html() come questo:

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); 

Non è così buono come la funzione .append(), ma se il .append() non lavoro, potresti essere costretto a fare qualcosa del genere.

Answer 3

Vorrei provare ad aggiungere l'attributo autoplay dopo aggiungere il lettore video. Questo dovrebbe quindi istanziare la funzione di riproduzione.

Quello sarebbe qualcosa di simile:

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

Quando si creano elementi in JavaScript vale a dire gli elementi delle immagini, oggetti, ecc, vengono caricati immediatamente e conservato nella memoria come oggetti.Questo è il motivo per cui è possibile precaricare le immagini prima di caricare una pagina. Non è quindi un bug jQuery.

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

Quando presente, l'agente utente (come descritto nel presente contesto algoritmo descritto ) inizierà automaticamente la riproduzione della risorsa media come appena può farlo senza fermarsi.

Answer 4

Ho lo stesso problema qui. Questo sembra essere un problema con l'uso dell'attributo "autoplay" sul tuo video markup.

• Rimuovere l'attributo autoplay
• accoda il video DOMNode a qualsiasi nodo
• se si vuole un comportamento autoplay, chiamare videodomnode.play() - utilizzando jQuery questo sarebbe $('video')[0].play()

Answer 5

Questo ha funzionato meglio nel mio caso:

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

Answer 6

Ho risolto il mio caricando il video dopo il dominio caricato:

$(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'); 
});