Kontrola pozycji początkowej i czasu odtwarzania w wideo HTML5

Question

Mamy wideo (13 minut), które chcielibyśmy kontrolować za pomocą HTML5. Chcemy umożliwić naszym użytkownikom kontrolowanie i wybieranie części filmów, które chcą odtwarzać. Korzystnie kontrola ta odbywa się przez 2 pola wejściowe. Będą wprowadzać czas rozpoczęcia (w sekundach) w pierwszym polu i czas trwania odtwarzania, aby odtworzyć (w sekundach) w drugim polu. Na przykład mogą chcieć rozpocząć wideo 10 sekund i grać przez 15 sekund. Czy są potrzebne jakieś sugestie lub wskazówki dotyczące Javascript?

Uwaga: Znalazłem następujące:

• Start HTML5 video at a particular position when loading?

Ale adresów zaczynających się tylko w określonym czasie, a nic z odtwarzaniem wideo w określonym przedziale czasu.

Answer 1

Można użyć odbiornika zdarzeń timeupdate.

Zapisanie czasu rozpoczęcia i czasu trwania do zmiennej po zdarzeniu loadedmetadata.

// Set video element to variable 
var video = document.getElementById('player1'); 

var videoStartTime = 0; 
var durationTime = 0; 

video.addEventListener('loadedmetadata', function() { 
    videoStartTime = 2; 
    durationTime = 4; 
    this.currentTime = videoStartTime; 
}, false); 

Jeśli aktualny czas jest dłuższy niż czas rozpoczęcia plus czas trwania, zatrzymuje wideo.

video.addEventListener('timeupdate', function() { 
    if(this.currentTime > videoStartTime + durationTime){ 
    this.pause(); 
    } 
}); 

Answer 2

Istnieje wiele niuansów do korzystania z rozwiązania javascript zaproponowanego przez Paula Shama. O wiele łatwiejszym sposobem jest użycie Media Fragment URI Spec. Pozwoli to określić mały segment większego pliku audio lub wideo do odtworzenia. Aby go użyć, po prostu zmień źródło pliku przesyłanego strumieniowo i dodaj #t=start,end, gdzie start to czas rozpoczęcia w sekundach, a end to czas zakończenia w sekundach.

Na przykład:

var start = document.getElementById('startInput').value; 
var end = document.getElementById('endInput').value; 

document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end; 

To będzie zaktualizować odtwarzacz, aby uruchomić film źródłowy w określonym czasie i zakończyć w określonym czasie. Obsługa przeglądarek dla fragmentów multimediów jest całkiem dobra, więc powinna działać w każdej przeglądarce obsługującej HTML5.

Answer 3

Jeśli jesteś w stanie ustawić czas rozpoczęcia i czas zakończenia wideo podczas ustawiania adresu URL wideo. można określić czas rozpoczęcia i zakończenia ich w samym URL jak

src="future technology_n.mp4#t=20,50" 

będzie grać od 20 sekundy do 50 sekund.

Answer 4

Rozszerzenie do michael hanon komentarze: IE zwraca buffered.length = 0 i seekable.length = 0. Wideo nie jest odtwarzane. Więc rozwiązanie:

src = "# t = video.mp4 10,30"

będzie nie działa w IE. Jeśli chciałbyś wesprzeć IE jedyną metodą jest użycie javascript do wyszukiwania wideo tuż po starcie od 0 sekund.