Wideo wstępne pełne wideo HTML5 w javascript

Question

Mam wysokiej jakości wideo, którego nie mogę skompresować zbyt wiele, ponieważ będzie to podstawa wielu analiz obrazów, w których każda klatka zostanie przerysowana na płótnie, a następnie zmanipulowana.

Próbuję wstępnie wczytać całość przed odtworzeniem, ponieważ nie mogę zatrzymać wideo, zachować bufora i kontynuować. Czy jest jakieś wydarzenie, na które mogę nasłuchiwać, co oznacza, że ​​cały film został wstępnie załadowany przed rozpoczęciem odtwarzania?

Oto jak to robię w JS/jQuery:

this.canvas   = this.el.find("canvas")[0]; 
this.video    = this.el.find("video")[0]; 
this.ctx    = this.canvas.getContext("2d"); 
this.video.autoplay = false; 

this.video.addEventListener("play",this.draw) 
this.video.addEventListener("timeupdate",this.draw) 
this.video.addeventlistener("ended",this.trigger("complete",this)) 

Answer 1

canplaythrough jest wydarzenie, które należy zwolnić gdy wystarczająco dane pobrane grać bez buforowania.

Z zespołami Opery doskonała (choć może bardzo lekko przestarzałe teraz) zasobów Everything you need to know about HTML5 video and audio

Jeśli obciążenie jest udany, czy za pomocą atrybutu src lub z wykorzystaniem elementów źródłowych, a następnie jako dane są pobierane, postęp wydarzeń są zwolnieni. Po załadowaniu wystarczającej ilości danych w celu określenia wymiarów i czasu trwania filmu wideo zostanie wywołane zdarzenie loadedmetadata. Po załadowaniu wystarczającej ilości danych do renderowania ramki, zdarzenie loadeddata zostanie wywołane. Po załadowaniu danych enugh, aby móc odtworzyć trochę wideo, zostaje wywołane zdarzenie canplay. Kiedy przeglądarka ustali, że może odtwarzać cały plik wideo bez zatrzymywania się w celu pobrania większej ilości danych, zdarzenie canplaythrough jest uruchamiane; to także wtedy, gdy wideo zaczyna grać, jeśli ma atrybut autoplay.

Należy zauważyć, że „canplaythrough” zdarzenie nie jest obsługiwany na urządzeniach z iOS, jak zaznaczono na areweplayingyet.org: http://areweplayingyet.org/event-canplaythrough

można obejść ograniczenia wsparcia poprzez wiązanie element load do tej samej funkcji, jak to wywoła na nich.

Answer 2

Do tej pory najbardziej zaufanym rozwiązaniem okazało się jego odtworzenie i oczekiwanie na pełne załadowanie bufora.

Co oznacza, że ​​jeśli film jest długi, będziesz musiał poczekać na prawie całą długość filmu.

To nie jest fajne, wiem.

Zastanawiasz się, czy ktoś wymyślił inny magicznie niezawodny sposób na to (najlepiej używając czegoś takiego jak PreloadJS, który automatycznie wraca do Flasha, gdy wideo HTML5 nie jest obsługiwane).

Answer 3

Można użyć tego piękny wtyczki: https://github.com/GianlucaGuarini/jquery.html5loader W jego API jest onComplete wydarzenie, które jest wyzwalane, gdy plugin zakończy załadować wszystkie źródła

Answer 4

Spowoduje to załadowanie cały film w JavaScript

var r = new XMLHttpRequest(); 
r.onload = function() { 
    myVid.src = URL.createObjectURL(r.response); 
    myVid.play(); 
}; 
if (myVid.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) { 
    r.open("GET", "slide.mp4"); 
} 
else { 
    r.open("GET", "slide.webm"); 
} 

r.responseType = "blob"; 
r.send(); 

Answer 5

Czy to działa?

video.onloadeddata = function(){ 
    video.onseeked = function(){ 
    if(video.seekable.end(0) >= video.duration-0.1){ 
     alert("Video is all loaded!"); 
    } else { 
     video.currentTime=video.buffered.end(0); // Seek ahead to force more buffering 
    } 
    }; 
    video.currentTime=0; // first seek to trigger the event 
}; 

Answer 6

Nadzieja to może pomóc

var xhrReq = new XMLHttpRequest(); 
xhrReq.open('GET', 'yourVideoSrc', true); 
xhrReq.responseType = 'blob'; 

xhrReq.onload = function() { 
    if (this.status === 200) { 
     var vid = URL.createObjectURL(this.response); 
     video.src = vid; 
    } 
} 
xhrReq.onerror = function() { 
    console.log('err' ,arguments); 
} 
xhrReq.onprogress = function(e){ 
    if(e.lengthComputable) { 
     var percentComplete = ((e.loaded/e.total)*100|0) + '%'; 
     console.log('progress: ', percentComplete); 
    } 
} 
xhrReq.send(); 

a następnie, jeśli src wideo ma inną domenę, trzeba obsłużyć CORS.