video HTML5 en el iPad

Question

Tengo una galería de videos dinámica y funciona muy bien en una computadora. Cuando se mueve a un iPad, el video comienza a cargarse y muestra el ícono de no se puede reproducir. En lugar de esto, preferiría que el video no se muestre hasta que esté listo para jugar. He tratado de agregar oyentes de eventos para "canplaythrough" y "canplay" y cuando ocurren para que el video se desvanezca y luego se reproduzca. ¿El iPad no es compatible con estos eventos?

new_video = document.createElement('video'); 
new_video.setAttribute('class', 'none'); 
new_video.setAttribute('width', '568'); 
new_video.setAttribute('height', '269'); 
new_video.setAttribute('id', 'video'+video_num); 
current_video.insertBefore(new_video, video_controls); 
new_video.load(); 
new_video.addEventListener('canplaythrough', function() { 
    $('#video'+video_num').fadeIn(100); 
    new_video.play(); 
}); 

Answer 1

Compruebe si el navegador puede reproducir el vídeo antes de intentar cargarlo:

function canPlayVorbis() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, '')); 
} 

function canPlayMP4() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); 
} 

function canPlayWebM() { 
    var v = document.createElement('video'); 
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); 
} 

Tomado de Dive Into HTML5 Appendix A.

Answer 2

En el iPad no se cargará el video hasta que el usuario inicie un evento, esto es por diseño de manzana para evitar que los usuarios de iPhone o iPad quemen sus planes de datos. Entonces no podrás hacer lo que quieras, lo siento.

Consulte este link y busque la sección Consideraciones específicas del dispositivo para obtener más información. Pero no comenzará a cargar datos, por lo que no podría disparar el evento canplaythrough hasta que el usuario lo toque.

Answer 3

se inicia automáticamente en el reproductor para ipad/iphone:

function fakeClick(fn) { 
    var $a = $('<a href="#" id="fakeClick"></a>'); 

    $a.bind("click", function(e) { 
     e.preventDefault(); 
     fn(); 
    }); 

    $("body").append($a); 

    var evt, 
     el = $("#fakeClick").get(0); 

     if (document.createEvent) { 
      evt = document.createEvent("MouseEvents"); 
      if (evt.initMouseEvent) { 
       evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
       el.dispatchEvent(evt); 
      } 
     } 

     $(el).remove(); 
} 

$(function() { 
    var video = $("#mobileVideo").get(0); 

    fakeClick(function() { 
     video.play(); 
    }); 
}); 

Answer 4

La manera de resolver este problema visual es ocultar el elemento de vídeo hasta que esté listo para ser jugado. Tenga en cuenta que no puede establecer display:none (el video no se cargará si lo hace) y visibility:hidden tampoco resolverá el problema.

Para solucionarlo, ajuste el elemento de video en un DIV con overflow:hidden y configure -webkit-transform:translateX(1024px) (un número lo suficientemente alto como para empujar el video fuera de la pantalla).

Que usted tiene que escuchar los canplay o canplaythroughload o eventos (en base a su necesidad) y establecer el translateX a cero después de eso.

Answer 5

Aquí es un gran lugar para familiarizarse con eventos HTML5.

http://www.w3.org/2010/05/video/mediaevents.html

Answer 6

el problema parece estar creando dinámicamente el objeto de vídeo - que de alguna manera rompe el código en el IPAD. Escribí un reproductor de video que mueve el presente elemento de video presente en un contenedor e inmediatamente el video deja de funcionar. sin embargo, no hay problema en otros sistemas ... supongo que tienes que encontrar la manera de tener el elemento de video en su lugar y luego agregar todos tus otros códigos arriba y abajo ...

Answer 7

Posiblemente sea por eso por lo que tu video MP4 no se reproducirá hasta que esté completamente cargado: how to get your HTML5 MP4 video to play before being fully loaded. Vale la pena intentarlo de todos modos.

Answer 8

cuenta de esto es una cuestión de edad, pero si alguien se tropieza otra persona a través de esto, me encontré con un problema similar.

Al observar los eventos enviados por el elemento de video, parece que el iPad comenzará a cargar el video y luego lo suspenderá casi inmediatamente (parece ser simultáneo con el primer evento de 'progreso').

Se no fuego los eventos "canplaythrough" hasta "canplay" o después de la reproducción ha comenzado realmente, por lo que debe escuchar a uno de los 3 eventos que hacen fuego antes de la reproducción se inicie:

• loadstart
• progreso
• suspender

que cambiaría su mango r a 'loadstart' y dar una oportunidad.