Odtwarzanie wideo HTML5 na iPada i poszukiwanie

Question

Bardzo dziwny błąd, którego nie potrafię wymyślić.

Próbuję uzyskać wideo HTML5 do odtwarzania z określonej pozycji, gdy użytkownik uderzy w grę. Próbuję mieć to prawo, gdy film zaczyna grać.

W moim przypadku odtwarzania zrobić this.currentTime = X

W przeglądarce to działa dobrze. Ale w iPadzie, kiedy odtwarzam wideo, wideo nie szuka właściwej pozycji (zaczyna się od zera).

Jeszcze dziwniej, jeśli wykonam wywołanie this.currentTime = X w trybie setTimeout, powiedzmy 1 sekundę, działa on na IPadzie (czasami).

Answer 1

Doceń poniższe odpowiedzi. Niestety, musiałem uciekać się do sprawdzenia w timeupdate, jeśli bieżący czas był> 0 i < 1, jeśli następnie trafił do tej części wideo i usunął słuchacza do timeupdate.

Answer 2

Staraj się ograniczyć do 1 X dziesiętny

X.toFixed(1); 

Jak wspomniano działa czasami po czasie 1 sekundy. Czy próbowałeś ustawić pozycję po wystrzeleniu zdarzenia playing? lub może nawet canplaythrough wydarzenie

Spójrz na źródła this page zobaczyć całą listę zdarzeń, które mogą być wykorzystywane (w pliku JavaScript)

Answer 3

iOS, obciążenie filmy at play time (patrz punkt # 2), a nie przy wczytywaniu strony. Domyślam się, że wideo nie jest ładowane po uruchomieniu this.currentTime = X, więc nie ma żadnego efektu. Wyjaśnia to również, dlaczego opóźnienie operacji może czasami rozwiązać problem: czasami ładuje się po chwili, czasem nie.

nie mam urządzenia iOS do przetestowania, ale sugeruję wiązania loadeddata słuchacza do filmu tak, że manipulacja currentTime dzieje dopiero po filmie zaczyna ładowania:

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

Będziesz musisz ustawić w swoim kodzie kod isIOSDevice na podstawie tego, czy bieżąca wizyta pochodzi z urządzenia iOS.

Answer 4

Chociaż to pytanie jest dość stare, problem pozostaje otwarty. Odkryłem rozwiązanie działające na wielu testowanych iPadach (1 + 2 + 3) na iOS 5 i 6 (iOS3 + 4 nie testowane):

Zasadniczo najpierw trzeba poczekać na początkowe wydarzenie playing, a następnie dodać jedno -czasowy spinacz dla canplaythrough, a następnie dla progress - tylko wtedy możesz zmienić wartość currentTime. Wszelkie próby, zanim to się nie powiedzie!

Na początku wideo musi zacząć grać, co sprawia, że ​​czarna warstwa na górze elementu wideo jest bardzo poręczna. Niestety, brzmi w filmie NIE można wyłączyć za pomocą JavaScript -> nie jest idealny 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(); 
     } 
    }); 
} 

całość można pobrać z my GitHub repo

Answer 5

apsillers ma rację.Po rozpoczęciu odtwarzania wideo odtwarzacz Quicktime pojawi się, a wideo nie będzie widoczne, dopóki nie zostanie wywołane pierwsze zdarzenie "postępu". Jeśli spróbujesz wcześniej szukać, dostaniesz nieprawidłowy błąd stanu. Oto mój kod:

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