JavaScript: Prosty odtwarzacz wideo cz. 1

0:00W tym praktycznym projekcie wykonamy sobie

0:02prosty odtwarzacz wideo, który będzie wyglądał tak, jak teraz widzisz.

0:05Niemniej jednak na razie jest to tylko HTML i CSS i kliknięcie np. tutaj w Play nic

0:10nie daje, a te czasy są tutaj wpisane na sztywno.

0:13Będziemy chcieli zrobić tak, aby to

0:15wszystko było dynamiczne i aby po prostu działało.

0:18Na początek pokażę Ci jak wygląda kod HTML

0:20i skupmy się na razie na tym elemencie video.

0:23Taki element jest dostępny w HTML i możemy mu podać atrybut stc do pliku video,

0:28co dokładnie tutaj zrobiłem.

0:30I powiem Ci teraz, że jeżeli dodali byśmy tutaj atrybut, który nazywa się controls

0:34to automatycznie pojawią się tutaj kontrolki.

0:36Jak widzisz ta pod spodem to jest moja,

0:38którą ja dodałem, ale tutaj pojawiły się takie natywne kontrolki

0:41i to wideo można odtwarzać, pauzować, zmieniać jego głośność itd.

0:45Czyli można powiedzieć, że po dodaniu

0:47takiego atrybutu wszystko co będziemy robić w tej lekcji nie miałoby sensu.

0:51Niemniej jednak w każdej przeglądarce

0:53inaczej będzie ten player domyślny wyglądał.

0:55Dlatego jeżeli chciałbyś stworzyć swój własny odtwarzacz i chciałbyś, żeby on

0:59wyglądał w każdej przeglądarce tak samo, wtedy musimy zrobić to wszystko ręcznie

1:03i dokładnie to chcę Ci pokazać w tej lekcji.

1:06Player, w którym odtwarzasz teraz to video na eduweb.pl został również napisany

1:10całkowicie od zera, w trochę podobny sposób jak będziemy robić w tej lekcji,

1:14ale ten nasz dzisiejszy będzie dużo, dużo prostszy.

1:17I teraz zobacz co ja tutaj już przygotowałem.

1:19Otóż napisałem ten markup, czyli HTML, który jest nam potrzebny żeby wyświetlić

1:23tą ikonkę play czy na przykład te czasy i wstawiłem je tutaj na sztywno.

1:28Dodatkowo do każdego takiego elementu,

1:30który będzie nam potrzebny w języku JavaScript dodałem atrybut data-js i np.

1:35timeline. Po co to zrobiłem?

1:37Z tego powodu, że pokazywałem Ci w tym

1:38kursie, iż możemy wyszukiwać na stronie elementów w najróżniejszy sposób np.

1:43po klasie czy po identyfikatorze.

1:45Teraz chcę Ci pokazać jeszcze inne podejście.

1:47Na dowolnym elemencie HTML możemy dodać

1:49sobie atrybut data pauza i tutaj cokolwiek tylko chcemy i jest to tzw.

1:54własny atrybut.

1:55Dlatego możemy dodać taki atrybut, ja to często czynię, jak data i następnie js np.

2:00timeline.

2:01To sugeruje, że ten atrybut jest tutaj potrzebny dlatego, że ten element będzie w

2:05jakiś sposób wyszukiwany z poziomu kodu JavaScript.

2:08Dzięki temu, że nie będziemy wyszukiwać po

2:10klasie czy po jakimś identyfikatorze, gdyby nad tym kodem pracował i np.

2:14designer i front-end developer, który tworzy ten player, to wtedy możemy umówić

2:18się, że designer może dowolnie zmieniać wszystkie te klasy, dodawać inne itd.

2:23i pisać je również w tym pliku

2:24CSS natomiast ma całkowicie nie ruszać tych atrybutów dodanych przez nas.

2:28Dzięki temu po tych atrybutach odwołamy

2:30się do tego elementu i wszystko zawsze będzie działać.

2:33Natomiast gdybyśmy go pobrali po klasie to

2:35jeżeli ktoś później zmieni tą klasę to nasz kod przestanie działać.

2:38A zatem to jest też dobry sposób, żeby pobierać sobie te elementy do JavaScript.

2:43Tak jak wspomniałem to data pauza jest wymagane, a potem dowolna rzecz, którą

2:47chcesz, więc ja podaję js, żeby powiedzieć, że w JavaScript się do tego

2:50elementu będę odwoływał no i jego nazwę unikalną

2:53jak widzisz za każdym razem tutaj jest inna.

2:56To co będę chciał teraz zrobić, to pobrać

2:57sobie wszystkie te elementy do zmiennych, żebyśmy mogli na nich pracować.

3:01I tutaj znowu drogi są dwie,

3:02bo moglibyśmy wszystkie te elementy utworzyć w sposób dynamiczny i wstrzyknąć

3:06na stronę, ale nie chciałem na to tracić czasu.

3:08Chcę Ci pokazać jak pracować z tym elementem video, a jeżeli uznasz, że

3:12przygotowaliśmy fajne rozwiązanie, to będziesz mógł również przenieść logikę

3:15tworzenia tych elementów do JavaScript właśnie po to, żeby ktoś kto korzysta z

3:20tego playera nie musiał ich tutaj wstawiać w kodzie HTML, ale aby wywołał naszą

3:24funkcję i aby one wszystkie utworzyły się same.

3:27To co będziemy chcieli zrobić to stworzyć sobie funkcję, którą nazwiemy createPlayer

3:31i chciałbym, żeby ta funkcja przyjmowała

3:34kontener, czyli główny element, w którym znajdują się wszystkie pozostałe elementy.

3:38I to będzie dokładnie ten element edu-player, któremu przypisaliśmy js-player.

3:42A zatem nazwiemy sobie tutaj parametr container

3:46i będziemy chcieli tę funkcję wywołać, żeby oczywiście uruchomić ten nasz player.

3:50A zatem co chcemy tutaj przekazać jako kontener?

3:52Ten element data-js-player.

3:54Jak go wyszukać? Z użyciem document.querySelector

3:58i po atrybutach możemy szukać w ten sposób.

4:01A więc data-js-player,

4:04czyli wywołaliśmy funkcję, przekazaliśmy tam odwołanie do tego elementu,

4:09do tego pierwszego elementu i mamy go tutaj już w środku.

4:12Zatem będziemy potrzebowali kilku takich stałych.

4:15Po pierwsze chcę wyszukać sobie element

4:17video, czyli ten element, ale jak widzisz szukam go właśnie w tym kontenerze.

4:20Dzięki temu moglibyśmy na stronie mieć więcej takich playerów i wywołać tę

4:24funkcję kilkukrotnie, przekazując tylko odpowiedni kontener.

4:28Więc zapiszemy container.querySelector i wyszukamy tam bezpośrednio elementu video.

4:33No i potrzebujemy jeszcze odwołanie do wszystkich pozostałych elementów takich

4:37jak timeline, play, duration czy progress, bo każdy z nich będzie nam potrzebny.

4:41A zatem ja je teraz wkleję.

4:42Ty również możesz je znaleźć do skopiowania na linii czasu.

4:46Tak to będzie wyglądać. Jak widzisz, nie ma tutaj zaskoczenia.

4:49To co jest istotne to to, że wyszukujemy w

4:50tym kontenerze przekazanym, a nie na całej stronie.

4:53Zatem możemy na stronie mieć więcej elementów, które mają taką samą nazwę

4:57tutaj w tym atrybucie, tylko musielibyśmy je zawrzeć w kolejnym takim

5:00playerze.

5:01I teraz to co będziemy chcieli zrobić na początek to po kliknięciu w przycisk Play,

5:05który mamy właśnie tutaj i na stronie on wygląda tak,

5:09będziemy chcieli zacząć odtwarzać to

5:10wideo, a jeżeli ono będzie odtwarzane, to będziemy chcieli to wideo zatrzymać. I

5:15zrobimy sobie to w takiej formie, że będziemy mieć tutaj kilka funkcji.

5:18Będę chciał funkcję nazwać togglePlay

5:21w ten sposób i następnie chcę ją przypisać do kliknięcia właśnie na ten element.

5:26A więc tutaj nie będzie nic, czego byś do tej pory nie znał, czyli play.addEventListener

5:30click i po kliknięciu chcemy wywołać funkcję togglePlay.

5:35W ten oto sposób console.log tutaj napiszmy sobie play i sprawdzimy czy to działa.

5:39Klikam na ten element, OK.

5:42Jak widzisz otrzymaliśmy tutaj jakiś błąd.

5:45Przyjrzyjmy mu się.

5:47OK, widzę literówkę.

5:49Tutaj zabrakło e. Spróbujmy jeszcze raz.

5:52Odświeżyło się, naciskam i widzimy play.

5:54No i teraz pytanie jak sprawdzić czy video

5:56jest aktualnie odtwarzane, czy nie jest żeby go odtworzyć?

5:59Otóż możemy się odwołać do tego elementu

6:01video, który jest tutaj u góry i będzie to odwołanie do HTMLMediaElement.

6:06Możesz to znaleźć w dokumentacji i tutaj są wszystkie właściwości z jakich możemy

6:10korzystać na takim elemencie, a także metody, z których skorzystamy później.

6:13Zatem zobaczmy. Mamy np.

6:15metodę Play, ale mamy również atrybut czy

6:18taką właściwość, która nas interesuje jak paused, gdzieś sobie tego wyszukam.

6:24Dokładnie tutaj i to nam zwraca boolean true lub false.

6:27Czy wideo jest zapauzowane czy nie.

6:29A zatem po wywołaniu tej funkcji będę chciał zapytać jeżeli video.paused,

6:34czyli jeżeli jest zapauzowane to chcę go odtworzyć pisząc po prostu video.play,

6:39bo to jest ta metoda, która też w dokumentacji się znalazła, a w przeciwnym

6:42wypadku jeżeli nie było zapauzowane, to chcę go zapauzować wpisując video.pause.

6:48Zobacz jak bardzo proste to jest.

6:50Z użyciem języka JavaScript komunikujemy

6:52się z takim API przeglądarki dla elementu video, tak samo by to działało dla

6:55elementu audio. No i zobaczmy jaki będzie tutaj efekt.

6:59Wrócimy sobie tutaj, nacisnę play i pause.

7:04Jak widzisz to wszystko się odtwarza i działa poprawnie.

7:06Natomiast teraz chciałbym zadbać o to, żeby zmieniać jeszcze tę ikonkę.

7:10Będzie to wyglądać tak, że mamy tutaj ten element i ma on taką kasę fa-play

7:15jeżeli to zmienimy na fa-pause, zobacz to wtedy będzie to wyglądać następująco.

7:20Więc dokładnie to będę chciał teraz zrobić i zrobimy to również w tej funkcji.

7:25Więc odwołamy się do tego przycisku play.classList, no i jeżeli odtwarzamy to chcemy

7:30usunąć klasę fa-play a następnie dodać klasę

7:38fa-pause tak jak mówiłem.

7:40A tutaj zrobimy rzecz odwrotną.

7:44Czyli usuniemy fa-pause i dodamy fa-play.

7:51OK, zobaczmy teraz.

7:55Jak widzisz wszystko działa poprawnie.

7:57Następną rzeczą, którą będę chciał zrobić

7:59to będę chciał, żeby tutaj ładował się taki pasek.

8:01Pokażę Ci jak on wygląda.

8:03Mamy tutaj w środku taki element w tym timeline.

8:06To jest ten progress. Jeżeli jemu przypiszemy width np.

8:0930% to będzie to w ten sposób załadowane. I chciałbym teraz to wyliczyć.

8:13Pokażę Ci jak to zrobić tutaj w konsoli.

8:15Jeżeli zaznaczymy ten element video to możemy się do niego odwołać pod dolar 0.

8:18Tak samo jak tutaj mamy w kodzie pobrany

8:20ten element, czyli możemy na nim poeksperymentować.

8:23I ma on taką właściwość jak currentTime

8:28i ona nam zwraca w sekundach, ile tego

8:30wideo zostało odtworzone, a także mamy taką właściwość jak duration,

8:38czyli ile trwa całe to wideo.

8:40Zatem jeżeli chcemy wyliczyć postęp, to

8:42wystarczy, że sobie podzielimy to w ten sposób, że napiszemy

8:46currentTime dzielone przez duration razy 100

8:53i mamy 8%, prawie 9 i taką wartość

8:55przypiszemy do width właśnie tego div. I to będzie się automatycznie zmieniać.

8:59Natomiast musimy do tego celu przypisać pewne zdarzenie.

9:03A zatem do elementów video przypiszemy,

9:05zobacz, że możemy przypisywać zdarzenia nie tylko do jakiegoś elementu div

9:08takim był elementem play, ale również do tego elementu video.

9:12On również ma taką metodę jak addEventListener i przypiszemy tutaj zdarzenie,

9:16które nazywa się timeupdate i ono się wywołuje za każdym razem, kiedy po prostu

9:20to video jest odtwarzane i ten postęp trwa.

9:23I tutaj będziemy chcieli wywołać funkcję,

9:25którą utworzymy, którą nazwiemy updateProgress.

9:28OK, no i teraz utwórzmy sobie taką funkcję.

9:34Ona oczywiście otrzyma event i teraz możemy się albo odwołać do event.currentTarget

9:38to nam zwróci video, bo na tym video to zdarzenie się wykonało.

9:42Albo możemy się tutaj bezpośrednio odwoływać do video.

9:44Ja się odwołam do event.currentTarget w ten sposób będzie to taka bardziej

9:48dynamiczna funkcja, która niekoniecznie liczy na to, że w zakresie tej funkcji

9:52również jest dostęp do jakiejś zmiennej z video. Po e.currentTarget zawsze będzie miała

9:56dostęp do elementu, na którym się wywloało to zdarzenie.

9:59No i będziemy chcieli tutaj wyliczyć ten progress

10:00tak jak wspomniałem.

10:01Czyli jeżeli currentTarget to jest video to będziemy mogli na nim się odwołać do

10:05currentTime i podzielić to przez e.currentTarget.duration pomnożyć razy 100

10:15i to wszystko będziemy chcieli przypisać

10:17jako szerokość tego elementu, o którym wspomniałem.

10:20Mamy go u góry w stałej zapisany jako progress, więc przypiszemy mu style.width

10:26i w takim Template Stringu dokładnie to co wyciąłem to sobie wkleję.

10:29Czyli to wszystko chcemy wyliczyć i

10:31przypisać tutaj w formie procentów Ten procent na końcu jest bardzo ważny.

10:34Zróbmy coś takiego no i sprawdźmy jak to będzie wyglądać.

10:41Jak widzisz wszystko działa.

10:42Ten pasek się tutaj ładuje, więc to

10:44zdarzenie jest odpalane właśnie tak często jak widzimy postęp tego paska.

10:49Pozostały nam do zrobienia jeszcze trzy rzeczy.

10:51Chciałbym móc kliknąć w dowolnym miejscu i

10:53przewinąć, a także chciałbym tutaj wyświetlać aktualny czas, czyli postęp, a

10:57tutaj całkowity czas, czyli to duration i tym zajmiemy się w lekcji kolejnej.