video - what - trello youtub
Video HTML5 en iPad (8)
Tengo una galería de videos dinámicos y funciona muy bien en una computadora. Cuando se mueve a un iPad, el video comienza a cargarse y muestra el ícono de no reproducir. En lugar de esto, prefiero que el video no se muestre hasta que esté listo para reproducirse. He intentado agregar escuchas de eventos para "canplaythrough" y "canplay" y cuando ocurren para que el video se difumine y luego se reproduce. ¿El iPad no soporta 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();
});
Aquí hay un GRAN lugar para familiarizarse con los eventos HTML5.
Compruebe si el navegador puede reproducir el video 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 Apéndice A.
Date cuenta de que esto es un problema antiguo, pero si alguien más se tropieza con esto, encontré un problema similar.
Mirando los eventos enviados por el elemento de video, parece que el iPad comenzará a cargar el video, luego lo suspenderá casi de inmediato (parece ser simultáneo con el primer evento de "progreso").
No activará los eventos "canplay" o "canplaythrough" hasta después de que la reproducción haya comenzado, por lo que debe escuchar uno de los 3 eventos que se activan antes de que comience la reproducción:
- arranque de carga
- Progreso
- suspender
Cambiaría su manejador a ''loadstart'' y le daría una oportunidad.
El problema parece estar creando dinámicamente el objeto de video, que de alguna manera rompe el código en el iPad. Escribí un reproductor de video que mueve el elemento de video actual en un contenedor e inmediatamente el video deja de funcionar. aunque no hay problema en otros sistemas ... supongo que tienes que encontrar una manera de tener el elemento de video en su lugar y luego agregar todo el otro código arriba y abajo ...
En el iPad, no cargará el video hasta que un usuario inicie un evento, este es un diseño de Apple para evitar que los usuarios de iPhone o iPad graben sus planes de datos. Así que no podrás hacer lo que quieras lo siento.
Echa un vistazo a este link y busca la sección de Consideraciones específicas del dispositivo para obtener información. Pero no iniciará la carga de datos, por lo que no se podría activar el evento de reproducción hasta que un usuario lo toque.
La forma de resolver este problema visual es ocultar el elemento de video hasta que esté listo para reproducirse. Tenga en cuenta que no puede configurar la display:none (el video no se cargará si lo hace) y la visibility:hidden tampoco solucionará el problema.
Para solucionarlo, envuelva 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).
De lo canplay debe escuchar los canplay canplaythrough canplay o canplaythrough canplay canplaythrough o load (según su necesidad) y, después de eso, establecer el translateX en cero.
Posiblemente este es el motivo por el que su video MP4 no se reproducirá hasta que esté completamente cargado: cómo hacer que su video HTML5 MP4 se reproduzca antes de que se cargue por completo . Vale la pena un tiro de todos modos.
inicia automáticamente el jugador en el 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();
});
});