Riproduzione di video HTML5 su IPad e ricerca di

Question

Bug molto strano che non riesco a capire.

Sto cercando di ottenere un video HTML5 da riprodurre da una determinata posizione quando un utente raggiunge la riproduzione. Sto cercando di farlo cercare quando il video inizia a giocare.

Sul mio caso il gioco lo faccio this.currentTime = X

Nel browser funziona benissimo. Ma su IPad, quando riproduco il video, il video non cerca la posizione giusta (parte da zero).

Ancora più strano, se faccio la chiamata this.currentTime = X in un setTimeout di diciamo 1 secondo, funziona su IPad (a volte).

Answer 1

Apprezzare i tentativi di risposte di seguito. Sfortunatamente, è stato necessario ricorrere al controllo interno di timeupdate se il tempo corrente era> 0 e < 1, se è stato poi spostato su quella parte del video e rimosso il listener in timeupdate.

Answer 2

cercare di limitare la X-1 decimale

X.toFixed(1); 

Come lei ha ricordato che funziona a volte dopo un tempo di 1 secondo. Hai provato a impostare la posizione dopo gli eventi playing? o forse anche la canplaythrough evento

Date un'occhiata alla fonte di this page di vedere tutta una serie di eventi che possono essere utilizzati (nel file javascript)

Answer 3

Su iOS, video carico at play time (vedi punto # 2), non al tempo di caricamento della pagina. La mia ipotesi è che il video non viene caricato quando si esegue this.currentTime = X, quindi non ha alcun effetto. Questo spiega anche perché ritardare l'operazione a volte può risolvere il problema: a volte è stato caricato dopo un secondo, a volte no.

Non ho un dispositivo iOS alla prova, ma io suggerirei vincolante un ascoltatore loadeddata al video in modo che la manipolazione currentTime avviene solo dopo che il video inizia carico:

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

Avrete è necessario impostare isIOSDevice altrove nel codice, in base al fatto che la visita corrente provenga da un dispositivo iOS.

Answer 4

Mentre questa domanda è piuttosto vecchia, il problema rimane aperto. Ho scoperto una soluzione che funziona su iPad testati multipli (1 + 2 + 3) per iOS 5 e 6 (iOS3 + 4 non testato):

Fondamentalmente devi prima attendere l'evento playing iniziale, quindi aggiungerne uno -time binder per canplaythrough e quindi per progress - solo in questo modo è possibile modificare il valore currentTime. Qualsiasi tentativo prima fallirà!

Il video deve iniziare la riproduzione all'inizio, il che rende un livello nero sopra l'elemento video molto utile. Purtroppo, i suoni all'interno del video non può essere disattivato tramite JavaScript -> non un UX perfetta

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

il tutto può essere scaricato dal my GitHub repo

Answer 5

apsillers è giusto.Quando inizia la riproduzione del video, verrà visualizzato il player Quicktime e il video non sarà ricercabile finché non viene attivato il primo evento di "avanzamento". Se provi a cercare prima, otterrai un errore di stato non valido. Qui è il mio codice:

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