video html5 reproduciendo dos veces (audio duplicado) con JQuery .append()

Question

Enorme WTF que pensé que era un error oculto en el semicomplex web app que estoy creando, pero lo reduje al código más simple posible, y es todavía se puede replicar en Firefox, Chrome y Safari, de manera impredecible pero más de la mitad de las veces.

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. Añadir un elemento de vídeo.
2. El video comienza a cargarse y reproducirse.
3. El audio de video parece que está duplicado.
4. Pausa el video visible, y una pista de audio continúa.
5. Eliminar el elemento de video; el audio fantasma sigue jugando.
6. Borre el marco y el audio fantasma se detiene (aunque una vez en Firefox continuó reproduciéndose después de cerrar la ventana, y no se detuvo hasta que salió de Firefox).

Aquí está una captura de pantalla para mostrar tal que no estoy completamente loco: http://www.youtube.com/watch?v=hLYrakKagRY

No parece que suceda al hacer el elemento con .html() en lugar de .append(), por lo que es mi única pista: 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>"); 

estoy en OS X 10.6.7.

---

Creo que lo tengo. Incluso acaba de crear el objeto jQuery sin agregarlo a la página hace que el jugador fantasma para jugar: 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>");

Por ahora se puede evitar esto usando .html(). Informaré the issue a JQuery.

Answer 1

¿Quizás jQuery almacena en la memoria caché el contenido de $() antes de agregarlo a su reproductor div? Entonces hay otra instancia de la etiqueta de video. Podría ser un error en jQuery. ¿Has probado esto sin Jquery/js?

Answer 2

Usted podría conseguir el HTML de #player y anexar el video de su auto, luego sume el total con .html() así:

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

No es tan buena como la función .append(), pero no si el .append() hace trabajo, es posible que se vea obligado a hacer algo como esto.

Answer 3

Intentaría agregar el atributo de reproducción automática después de anexar el reproductor de video. Esto debería entonces crear una instancia de la función de reproducción.

Eso sería algo como esto:

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

Al crear elementos en JavaScript es decir, elementos de imagen, objetos, etc., que se cargan al instante y se almacena en la memoria como objetos.Es por eso que puede precargar imágenes antes de cargar una página. Por lo tanto, no es un error jQuery.

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

Cuando está presente, el agente de usuario (como se describe en el algoritmo descrito en el presente documento ) comenzará automáticamente la reproducción del recurso de comunicación como pronto como pueda hacerlo sin parar.

Answer 4

Tengo el mismo problema aquí. Esto parece ser un problema con el uso del atributo "reproducción automática" en su marcado de video.

• Quitar el atributo de reproducción automática
• anexar su DOMNode vídeo a cualquier nodo
• si desea que el comportamiento de reproducción automática, llame videodomnode.play() - usando jQuery esto sería $('video')[0].play()

Answer 5

Ésta funcionó mejor en mi caso:

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

Answer 6

Resolví el mío cargando el video después de dom loaded:

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