Zabaw się sterowaniem twojego filmu i zobacz, w jaki sposób efektywnie możesz zmienić pozycję odtwarzania. W tym samouczku dowiesz się, jak za pomocą parametru currentTime w React możesz kontrolować pozycję filmu. Skupiamy się na implementacji suwaka Range, który umożliwia nawigację między różnymi momentami filmu za pomocą prostego interfejsu użytkownika. Zaczynajmy!
Najważniejsze wnioski
- Parametr currentTime elementu wideo kontroluje pozycję odtwarzania.
- Suwak Range może być używany do stworzenia wizualnej i interaktywnej kontroli pozycji wideo.
- Aby mieć precyzyjną kontrolę nad pozycją, należy wykorzystać wartość procentową między aktualnym stanem odtwarzania a długością filmu.
- Wydarzenia takie jak onTimeUpdate są kluczowe do dynamicznej aktualizacji interfejsu użytkownika.
Przewodnik krok po kroku
Krok 1: Konfiguracja suwaka Range
Zacznij od implementacji suwaka Range. Ten suwak umożliwi ci kontrolowanie pozycji wideo. Skopiuj podstawową konstrukcję swojego suwaka i dostosuj atrybuty min i max, aby wyświetlić wartości zgodnie z długością filmu.
Krok 2: Zdefiniuj currentTime
Atrybut currentTime przechowuje aktualną pozycję odtwarzania wideo w sekundach. To klucz do kontrolowania, gdzie właśnie jesteś w filmie. Ustaw inicjalizację tak, aby pozycja odtwarzania była ustawiona na początek filmu.
Krok 3: Utwórz stan dla pozycji
Musisz utworzyć nowy stan dla pozycji wideo. W naszym przypadku możesz po prostu nazwać go position, a wartość początkowa wynosi 0. Oznacza to początek filmu, czyli 0% odtwarzania.
Krok 4: Aktualizuj pozycję suwaka
Z nowym stanem ważne jest faktyczne aktualizowanie wartości suwaka, zależnie od pozycji w filmie. Ustaw wartość suwaka, aby pozostawała zsynchronizowana z aktualną pozycją.
Krok 5: Wprowadź długość
Aby dowiedzieć się, ile procent wideo już zostało odtworzone, musisz wyłuskać całkowity czas trwania filmu. Możesz to osiągnąć za pomocą atrybutu duration elementu wideo. Pomnóż aktualnie ustawioną pozycję przez całkowity czas trwania filmu.
Krok 6: Dodaj słuchacza zdarzeń do aktualizacji czasu
Aby zapewnić, że pozycja suwaka zostanie zaktualizowana, gdy wideo zostanie odtworzone, musisz dołączyć słuchacza zdarzeń dla onTimeUpdate do elementu wideo. Ten słuchacz będzie regularnie sprawdzał aktualny czas i odpowiednio aktualizował suwaka.
Krok 7: Obsługa błędów dla nieokreślonych wartości
Ważne jest zapewnienie, że wartość currentTime jest zdefiniowana i dostępna jest długość wideo, zanim przystąpisz do obliczeń. Dodaj logikę, aby radzić sobie z możliwymi stanami początkowymi wideo.
Krok 8: Zaokrąglaj i formatuj czas
Optymalnie jest zaokrąglać czas wyświetlany do pełnych sekund. Ta poprawka sprawia, że interfejs użytkownika jest czysty i przyjazny dla użytkownika. Wykorzystaj funkcję Math.round(), aby odpowiednio sformatować wartości.
Krok 9: Testowanie na żywo funkcjonalności
Po zakończeniu wszystkich tych kroków, przeładuj projekt i przetestuj suwak. Upewnij się, że pozycja wideo może być dostosowywana w obie strony i sprawdź, czy czas jest poprawnie aktualizowany.
Podsumowanie
Teraz nauczyłeś się, jak kontrolować odtwarzanie wideo w React, implementując efektywny suwak, który dynamicznie aktualizuje właściwość currentTime. W ten sposób łatwo możesz nawigować między różnymi punktami w wideo.
Najczęstsze pytania
Jaka jest różnica między currentTime i duration?currentTime określa aktualną pozycję odtwarzania, podczas gdy duration opisuje całkowitą długość wideo.
Jak zaktualizować pozycję suwaka podczas odtwarzania?Dodaj do elementu wideo nasłuchiwacz zdarzeń onTimeUpdate, który sprawdza aktualny czas i aktualizuje stan suwaka.
Jak mogę upewnić się, że mój suwak działa poprawnie?Sprawdź, czy poprawnie zaimplementowałeś logikę zarządzania stanem w React. Upewnij się, że currentTime i duration są poprawnie zdefiniowane.
Czy mogę użyć suwaka także do dźwięku?Tak, zasada pozostaje taka sama. Możesz stosować te same techniki do elementów audio, ponieważ posiadają one podobne atrybuty.
