javascript - habilitar - El elemento de video desaparece en Chrome cuando no se usan controles

habilitar javascript en chrome en windows

Question

Entonces, creo que esto es un error del navegador. Apareció en un diseño / sitio mucho más complicado, pero he tenido un buen violín sólido, simplifiqué mi código y diseños, etc., y he encontrado lo siguiente:

Al incrustar <video> sin un atributo de controles en Chrome, activar el video para jugar usando javascript hace que el elemento de video quede en blanco.

http://jsfiddle.net/trolleymusic/2fHTv/

La falta de nitidez es un poco aleatoria, a veces saliendo del elemento, volverá a aparecer. A veces es necesario hacer clic / enfocar en otra cosa, la mayoría de las veces la pausa del video hará que reaparezca.

También coloqué una línea (comentada) para mostrar que no solo se basa en el clic, sino que también se setTimeout cuando se setTimeout play() través de setTimeout .

De todos modos, ten una jugada y dime lo que piensas.

¡Gracias!

Wayne

(Ooo - y el otro video está ahí para mostrar que el otro elemento que es idéntico aparte del atributo de controls funciona bien

Answer 1

Bueno, también puedo responder mi propia pregunta en caso de que alguien la necesite en el futuro.

Es un error, funciona bien en Chrome 19.

Mi solución en este caso fue verificar si había un atributo de control, si no agregarlo, reproducir el video y luego eliminar el atributo de control.

Compruébelo: http://jsfiddle.net/trolleymusic/vhgss/

playVideo = function(el) {
    if (!el) { return; }
    if (el.getAttribute(''controls'') !== ''true'') {
        el.setAttribute(''controls'', ''true'');                    
    }
    el.paused ? el.play() : el.pause();
    el.removeAttribute(''controls'');
}

Answer 2

Esto parece ser un error. He solucionado esto haciendo cosquillas manualmente en el método de juego en $ (documento). Preparado para todos mis videos en lugar de agregar la etiqueta de reproducción automática:

(''#videoId'').get(0).play()

Answer 3

He informado sobre este error al proyecto Chromium. Mientras tanto, como una solución alternativa (todavía presente en Chrome 30), agregué controles a todos los elementos de video en la página, pero apliqué una clase llamada animation a aquellos que se activarán indirectamente por eventos en la página (como profundidad de desplazamiento) que directamente por el usuario.

<video class="animation" preload controls>

Luego .animations los controles de .animations usando jQuery:

$( document ).ready(function() {
  $(''video.animation'').removeAttr(''controls'');
});

Esto resuelve el problema mientras esperamos una solución para la regresión .