Uruchomić wideo HTML5 w określonej pozycji podczas ładowania?


91

Potrzebuję wideo HTML5, aby zacząć w pewnym momencie. Powiedzmy, że 50 sekund naprzód.

Próbowałem, ale nie działa zgodnie z oczekiwaniami. czy jest coś, co robię źle?

Oto kod:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 

Po załadowaniu strony po prostu zaczyna się odtwarzać od początku. Jeśli jednak wezmę to podczas odtwarzania, jak po pewnym czasie, działa dobrze. Czy jest coś, czego mi brakuje?


2
Jakie przeglądarki? Czy próbowałeś opóźnić połączenie o kilka milisekund? Może zajmie trochę więcej czasu, aby w pełni załadować element wideo
Ortiga

Odpowiedzi:


130

Musisz poczekać, aż przeglądarka pozna czas trwania wideo, zanim będziesz mógł wyszukać określony czas. Więc myślę, że chcesz poczekać na zdarzenie „załadowane metadane”, mniej więcej tak:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

2
To nie działa w Safari. Próbowałem też zdarzenia loaddata. Jakieś pomysły?
Simon Perepelitsa

Nieważne. Jest to problem z formatem WEBM. MP4 działa dobrze.
Simon Perepelitsa

Użyj zdarzenia „zmiana czasu trwania” i zawsze dzwoń do pauzy przed wprowadzeniem zmian w odtwarzaniu wideo
Jason White

53

Możesz połączyć się bezpośrednio z URI fragmentów multimediów , po prostu zmień nazwę pliku na file.webm # t = 50

Oto przykład

To jest całkiem fajne, możesz robić różne rzeczy. Ale nie znam aktualnego stanu obsługi przeglądarek.


Obsługa przeglądarki jest dobra. Myślę, że wszystkie przeglądarki obsługujące HTML5 obsługują również przynajmniej podstawowe tymczasowe fragmenty multimediów.
Jim S.

@michaelhanon, byłoby raczej łatwo napisać polifill dla IE, aby to osiągnąć. Wykryj przeglądarkę, jeśli nie jest obsługiwana, podziel adres URL, znajdź parametr zapytania, użyj JavaScript, aby zmienić czas wideo ... Mogę to zrobić, jeśli będę miał szansę
gdgr

czy jest fragment do ustawienia czasu KONIEC?
DGoiko,

Pozwala nawet na ułamki sekundy po kropce: #t=17.79^ _ ^
Klesun

51

BEZ KORZYSTANIA Z JAVASCRIPT

Po prostu dodaj #t=[(start_time), (end_time)]na końcu adresu URL multimediów. Jedyną przeszkodą (jeśli chcesz to zobaczyć w ten sposób) jest to, że musisz wiedzieć, jak długo Twój film ma wskazywać czas zakończenia. Przykład:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Uwagi: nieobsługiwane w IE


druga cyfra nie kończy się na tym, jaka część wideo została załadowana na początku ... pierwsza cyfra jednak zadziałała. jakieś pomysły?
Martian2049

to naprawdę nie działa dobrze. przeglądarka nadal ładuje wstępnie tyle, ile chce, może po prostu zaczyna się i kończy tam, gdzie zdecydowałeś, ale wstępne
ładowanie się

28

dostosuj czas rozpoczęcia i zakończenia wideo podczas używania tagu wideo w html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

gdzie po lewej stronie przecinka czas rozpoczęcia w sekundach, po prawej stronie przecinek czas zakończenia w sekundach. upuść przecinek i czas zakończenia, aby wpłynąć tylko na czas rozpoczęcia.


druga cyfra nie kończy się na tym, jaka część filmu została załadowana na początku ... pierwsza cyfra jednak zadziałała. jakieś pomysły?
Martian2049

Podczas pracy z przeglądarkami zawsze lepiej jest sprawdzić specyfikację W3C i caniuse.com, aby zobaczyć, jak szeroko obsługiwana jest dana funkcja. (Najlepsze odpowiedzi StackOverflow prowadzą do specyfikacji). W tym przypadku są one nazywane „Fragmentami multimediów”, a specyfikacja jest tutaj. w3.org/TR/media-frags
Michael

3

W Safari Mac dla źródła HLS potrzebowałem użyć zdarzenia loaddata zamiast zdarzenia metadata.


Myślę, że załadowane metadane powinny być poprawnym zdarzeniem, ale ja też otrzymywałem seekable.length 0 (tylko w Safari na OSX), chyba że nasłuchiwałem wczytanych danych. Dzięki
Statuswoe

1
Dlaczego ten głos został odrzucony? Prawdopodobnie nie jest to bezpośrednio związane z przykładem podanym w PO, ale jest zgodne z faktami i ma związek z ogólnym tematem pytania.
JayPea

3

U #t=10,20mnie zadziałało użycie fragmentu.


1
To tylko powtórzenie dwóch innych odpowiedzi, które uzyskały wyższą liczbę głosów, które zostały napisane około 5 lat wcześniej.
Michael Scheper
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.