HTML5 video en iPad y buscando

Question

Muy extraño insecto no puedo parece que averiguar.

estoy tratando de conseguir un vídeo de HTML5 para reproducir desde una cierta posición cuando un usuario pulsa juego. Estoy tratando de hacer que busque justo cuando el video comienza a reproducirse.

En mi caso me hacen juego this.currentTime = X

En el navegador funciona bien. Pero en el iPad, cuando reproduzco el video, el video no busca la posición correcta (comienza desde cero).

Aún más curiosamente, si hago la llamada this.currentTime = X en un setTimeout de, digamos, 1 segundo, funciona en el IPad (a veces).

Answer 1

Agradezca los intentos de respuesta a continuación. Desafortunadamente, tuve que recurrir a solo verificar dentro de timeupdate si la hora actual era> 0 y < 1, si fue entonces a esa parte del video y quité el oyente a timeupdate.

Answer 2

tratan de limitar su X a decimal 1

X.toFixed(1); 

Como usted ha mencionado a veces funciona después de un tiempo de 1 segundo. ¿Ha intentado establecer el puesto después de que se activa el evento playing? o tal vez incluso el canplaythrough caso

Tome un vistazo a la fuente de this page para ver una lista completa de eventos que se pueden utilizar (en el archivo JavaScript)

Answer 3

En iOS, la carga de vídeos at play time (ver punto # 2), no en el tiempo de carga de la página. Supongo que el video no se carga cuando ejecuta this.currentTime = X, por lo que no tiene ningún efecto. Esto también explica por qué el retraso de la operación a veces puede solucionar el problema: a veces se ha cargado después de un segundo, a veces no.

no tengo un dispositivo iOS para probar, pero me gustaría sugerir un enlace de receptor loadeddata al video para que su manipulación currentTime sólo ocurre después de que el video empiece carga:

// within the play event handler... 
if(!isIOSDevice) { 
    this.currentTime = X; 
} else { 
    function trackTo(evt) { 
     evt.target.currentTime = X; 
     evt.target.removeEventListener("loadeddata", trackTo) 
    }); 
    this.addEventListener("loadeddata", trackTo); 
} 

podrás debe establecer isIOSDevice en otro lugar de su código, en función de si la visita actual proviene de un dispositivo iOS.

Answer 4

Si bien esta pregunta es bastante antigua, el problema permanece abierto. He descubierto una solución que funciona en múltiples iPads ensayadas (1 + 2 + 3) para iOS 5 y 6 (iOS3 + 4 no han sido evaluados):

Básicamente primero hay que esperar a que el playing evento inicial, a continuación, añadir una en tiempo limitado para canplaythrough y luego para progress - solo entonces puede realmente cambiar el valor de currentTime. ¡Cualquier intento antes de eso fracasará!

El video debe comenzar a reproducirse al principio, lo que hace que una capa negra en la parte superior del elemento de video sea útil. Por desgracia, los sonidos en el vídeo no puede ser desactivado a través de JavaScript -> no es una perfecta UX

// https://github.com/JoernBerkefeld/iOSvideoSeekOnLoad/MIT License 
// requires jQuery 1.8+ 
// seekToInitially (float) : video-time in seconds 
function loadingSeek(seekToInitially, callback) { 
    if("undefined"==typeof callback) { 
     callback = function() {}; 
    } 
    var video = $("video"), 
     video0 = video[0], 
     isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null, 
     test; 
    if(isiOS) { // get the iOS Version 
     test =navigator.userAgent.match("OS ([0-9]{1})_([0-9]{1})"); 
     // you could add a loading spinner and a black layer onPlay HERE to hide the video as it starts at 0:00 before seeking 
     // don't add it before or ppl will not click on the play button, thinking the player still needs to load 
    } 
    video.one("playing",function() { 
     if(seekToInitially > 0) { 
      //log("seekToInitially: "+seekToInitially); 
      if(isiOS) { 
       // iOS devices fire an error if currentTime is set before the video started playing 
       // this will only set the time on the first timeupdate after canplaythrough... everything else fails 
       video.one("canplaythrough",function() { 
        video.one("progress",function() { 
         video0.currentTime = seekToInitially; 
         video.one("seeked",function() { 
          // hide the loading spinner and the black layer HERE if you added one before 

          // optionally execute a callback function once seeking is done 
          callback(); 
         }); 
        }); 
       }); 
      } else { 
       // seek directly after play was executed for all other devices 
       video0.currentTime = seekToInitially; 

       // optionally execute a callback function once seeking is done 
       callback(); 
      } 
     } else { 
      // seek not necessary 

      // optionally execute a callback function once seeking is done 
      callback(); 
     } 
    }); 
} 

todo el asunto se puede descargar desde my GitHub repo

Answer 5

apsillers es correcto.Una vez que el video comienza a reproducirse, el reproductor Quicktime aparecerá y el video no se podrá buscar hasta que se desencadene el primer evento de 'progreso'. Si intenta buscar antes, obtendrá un error de estado no válido. Aquí está mi código:

cueVideo = function (video, pos) { 
    try { 
     video.currentTime = pos; 

    // Mobile Safari's quicktime player will error if this doesn't work. 
    } catch(error) { 
     if (error.code === 11) { // Invalid State Error 

      // once 'progress' happens, the video will be seekable. 
      $(video).one('progress', cueVideo.bind(this, video, pos)); 
     } 
    } 
}