JavaScript: Prosty odtwarzacz wideo cz. 2
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej i zacząć korzystać z nowoczesnych frameworków.
Kontynuujemy pracę nad playerem i teraz
będę chciał zając się tym, żeby tutaj w tym miejscu gdzie widzimy 12 53 wpisane na
sztywno ustawić odpowiedni czas tego wideo.
Zaczniemy od tego, że do elementów video
przypiszemy odpowiednie zdarzenie, czyli Add Event Lesnar
i mamy takie zdarzenie, które nazywa się Duration Change.
Chodzi o to, że w momencie kiedy
przeglądarka już na tyle sobie pobierze tego wideo z internetu, że będzie
wiedziała jaka jest długość tego video, to zostanie właśnie wywołane to zdarzenie.
A my wtedy chcemy wywołać funkcję, którą nazwiemy update duration.
OK. Oczywiście tę funkcję należy utworzyć.
Ona otrzyma event i będziemy mieli pod event parent target albo pod event target,
bo w tym przypadku to będzie to samo odwołanie do elementu video.
I teraz mamy tutaj pobrane duration.
To jest na stronie właśnie ten element, gdzie to jest na sztywno wpisane.
Będę chciał jemu ustawić odpowiedni czas, więc odwołamy się do duration i text
content aby zmienić jego zawartość tekstową.
I teraz odwołamy się do Event Parent Target, czyli do tego właśnie video.
To jest to samo co zmienna video na górze
i do duration to będziemy chcieli przypisać.
Więc zobaczmy jak to się zachowa.
Jest wszystko ok, natomiast problem jest
taki, że to duration jest zwracane w formie sekund i tak to wygląda.
A więc musimy sobie stworzyć funkcję, która nam sekundy
zamieni na taką reprezentację, gdzie będziemy widzieli czas, wczytany sposób.
Teraz powiem Ci od razu, że moglibyśmy
teraz siedzieć i przez 20 minut tłumaczyć jak działa taka funkcja.
Albo możemy zrobić to, co każdy
programista robi codziennie w swojej pracy, czyli po prostu przejść do
wyszukiwarki Google i wpisać coś takiego jak Seconds tu time JavaScript
i po prostu przejść na jakąś stronę typu Stack Overflow.
I tutaj znajdziesz bardzo wiele rozwiązań
opowiadanych przez różnych użytkowników i wystarczy z któregoś z nich skorzystać.
No i ja oczywiście przyznam, że też z jednego z nich sobie skorzystałem, nie
wiem czy konkretnie z tej strony, czy z jakiejś innej.
Niemniej jednak czasami nie ma sensu siedzieć i wymyślać jak coś zrobić.
Wystarczy znaleźć gotowe rozwiązanie.
Zatem chciałbym sobie tutaj stworzyć funkcję jaką wkleję i również możesz sobie
ją skopiować z linii czasu, która nazywa się Second Time.
Przekażemy jej liczbę sekund sekund, którą
mamy tutaj w Duration i ona nam zwróci ładnie sformatowany czas.
Więc ja tutaj z grubsza rozumiem co się
dzieje, ale nie zależy mi na tym, żeby w stu procentach się wgryzać w taki kod.
Jeżeli tego kodu nie ma dużo i wiem, że nie skopiowałem po prostu setek linijek
kodu cudzego kodu, więc wtedy wystarczy, że mniej więcej
wiemy co tutaj się dzieje, a nie musimy się zagłębiać w każdą z tych rzeczy.
Ważne, że taki kod działa.
I zapamiętaj, że jest jak najbardziej
normalne i wręcz jest pożądane czasami, żeby wydajnie pracować.
Szukanie gotowych rozwiązań właśnie takich niewielkich problemów.
Zatem mając już taką funkcję second time w miejscu, w którym pod ustawialiśmy
duration, wywołamy tę funkcję sekund time i po prostu wstawimy to, co tam było.
Ona nam zwróci ładnie sformatowany czas.
Jak widzisz, to wideo trwa 20 sekund.
Tutaj zostało dodane do zera i dwukropek i fajnie to wygląda.
No i teraz ta funkcja dla nas będzie
używana, bo również chcemy z niej skorzystać tutaj.
A zatem przypiszemy kolejne zdarzenie do elementu video, czyli Add event sender
i to zdarzenie będzie się nazywało Time Update i ono się odwołuje.
Jak widzisz już wcześniej to robiliśmy za
każdym razem, kiedy to video jest odtwarzane.
Co jakiś czas po prostu się to wywołuje i przy tym samym zdarzeniu będziemy chcieli
zrobić update time taką funkcję i ta funkcja będzie bardzo podobna do tego
co już tutaj zrobiliśmy, więc mogę to skopiować, nazwać ją update time.
Tylko że ona będzie się odwoływała do tego
elementu time, który sobie już wcześniej zapisaliśmy.
Zatem tutaj w środku będzie się odwoływała do Parent
Time, z którego też już wcześniej korzystaliśmy np.
w tym miejscu. Tyle wystarczy zrobić i podczas
odtwarzania tutaj po prostu ten czas będzie się zmieniał, więc zerknij.
Jak za pauzuje oczywiście przestaje się w Play zmieniać.
No i w zasadzie została nam ostatnia rzecz do zrobienia.
Chciałbym po kliknięciu tutaj w ten timeline móc odpowiednio przewijać.
Powiem Ci od razu jak to się robi.
Odwołamy się do tego elementu video, czyli pod dolar 0.
Mam do niego odwołanie.
Jak current time mogliśmy odczytywać w ten sposób to również możemy go ustawiać.
Zatem jeżeli ustawię tutaj current time na
10 sekund to to video przewinie się jak widzisz do środka.
My generalnie chcemy teraz zrobić tak,
żeby zarejestrować zdarzenie kliknięcia na tego diva jakim jest ten timeline
i odczytać sobie gdzie w tym drzewie kliknę liść.
Czy jak kliknę na środek
to będę chciał po prostu odczytać pozycję myszy odtąd dotąd?
Następnie szerokość całego elementu i
wyliczyć ile procent tego elementu klik daliśmy.
To jest coś co już w tym kursie Ci
pokazywałem, ale teraz zrobimy to jeszcze raz.
Zatem do elementu Timeline, który też
sobie tutaj pobrałem, przypiszemy zdarzenie kliknięcia.
Może zróbmy to tutaj?
Event Designer
Po kliknięciu na ten element będziemy chcieli wywołać funkcję set time.
Tak sobie ją nazwiemy i możemy ją teraz wstawić tutaj.
Ona otrzyma event, więc będziemy mogli się
odwołać do Parent Target, czyli do aktualnie kliknięcia tego elementu, albo
mógłby się do zmiennej, którą mamy tutaj timeline odwoływać.
Byłoby to to samo, ale ja preferuję właśnie ten sposób.
No i teraz będziemy chcieli sobie po
pierwsze pobrać geometrię tego elementu, co już w tym
kursie Ci pokazywałem, więc zapiszę sobie to w stałej postaci i odwołam się do aka
rent target, czyli do tego diva, który klikniemy.
I do Get Building Client React.
I to nam zwróci właśnie i jego wymiary i jego pozycję na stronie.
Teraz będziemy chcieli sobie pobrać ile od lewej strony dotknęliśmy, Natomiast jeżeli
klikniemy tutaj to będziemy mieli w tym evencie coś takiego jak
Page X, czyli to będzie gdzie był kursor myszy w momencie kliknięcia.
Więc jeżeli np. kliknę tutaj, to ten kursor
pod Page X będzie miał odległość odtąd aż do tej krawędzi.
A nas interesuje odtąd dotąd, żeby pobrać
sobie, ile w środku tego elementu poznaliśmy.
A zatem w tej pozycji, którą teraz
pobraliśmy, mamy coś takiego jak left to left.
To jest odległość tego elementu, na które
klikniemy od lewej krawędzi tego dokumentu.
A zatem to będziemy chcieli sobie odjąć i
to też już robiliśmy w tym kursie wcześniej.
Czyli co będę chciał zrobić?
Napisać sobie left równa się Page X, czyli tak jak wspomniałem gdzie
był kursor myszy, kiedy kliknąć i od tego odjąć post left.
Czyli jak wspomniałem jeżeli kliknę tutaj to mamy całą odległość.
Dotąd od tego odejmujemy left, czyli to i
zostanie nam ile w środku tego elementu mieliśmy.
I pobierając szerokość tego elementu będziemy mogli to wszystko wyliczyć.
A zatem stworzę sobie stałą percent także
jak procenty i podzielimy sobie po prostu left przez.
POZ, czyli szerokość całego tego diva.
No i w ten sposób wyliczyliśmy sobie odpowiednie procenty,
ale nie przeliczamy tego raz jest to chcę Ci pokazać dlaczego.
Wstawiamy to sobie tutaj do konsoli log.
OK. Kliknę gdzieś na ten element na środku.
No i widzisz.
Jak widzisz mamy 45 mniej więcej coś takiego, ale nie mnoży tego raz to.
Bo teraz chcę wyliczyć na tej podstawie jaki czas na video powinniśmy ustawić.
Czyli jeżeli to wideo trwa 20 sekund, jak kliknę gdzieś na środku tego elementu,
powiedzmy, że kliknę tutaj, żeby mieć tak 050 dokładnie to 20 sekund.
Jeżeli pomnożymy razy 050, wyjdzie nam, że powinniśmy ustawić dziesiątą sekundę na
tym wideo, żeby właśnie ono było w tym miejscu.
Mam nadzieję, że to jest jasne, więc ostatnia rzecz, którą powinniśmy tutaj
zrobić jest to napisanie wideo parent time, czyli ustawienie czasu tego
wideo właśnie na jego duration, czyli długość trwania razy.
Ten, który wyliczyliśmy. OK.
I w zasadzie to powinno wystarczyć.
Nie muszę nawet dawać play.
Przyjmijmy do połowy.
Kliknąłem i wszystkie inne zdarzenia się wywołały.
Czyli zwało się zdarzenie Time Update, a
co za tym idzie nasza funkcja Update progress i Update Time.
I tutaj to wszystko również zostało
podstawione i ten pasek jakby się załadował.
No i możemy w ten sposób przewijać.
Jeżeli będę odtwarzał i przewijał też będzie działać.
Jak widzisz jest prawie ok.
Mamy tutaj tylko taki problem, że w
momencie kiedy chciałem nacisnąć pauzę to przewinęło mi tutaj do początku.
Dlaczego tak się dzieje? Otóż zarejestrowaliśmy zdarzenie
kliknięcia na całym tym drzewie, a w tym drzewie znajduje się też przycisk PLAY.
Zatem jeżeli kliknę na play to pamiętasz
być może z lekcji o dubbingu jest taka lekcja czym jest Blink.
Oznacza to, że jak kliknę w play, który jest w tym drzewie to też kliknąłem w tego
diva, a skoro kliknąłem w diva to wywołała się nasza funkcja set time.
I tutaj możemy pokazać na świetnym
przykładzie jak korzystać ze stop propagacji, które omawiałem w lekcji o
zapobieganiu domyślnej akcji przeglądarki, czyli w momencie kiedy klikniemy na
przycisk Play przechwyci my tutaj event i chce na nim wywołać event stop propagację.
To sprawi, że jeżeli klikniemy na Play to on przestanie jakby dublować do góry,
czyli zgłaszać do góry, że został okrzyknięty.
I w praktyce to wygląda tak, że jak kliknę
na play to div w którym template się znajduje nie wie o tym, że został
okrzyknięty i to jest to co chcemy tutaj uzyskać.
Zobacz.
I dokładnie teraz udało się za pauzować, ale ten gif nie wie, że został klikniemy,
więc nie przewidziano wideo do samego początku.
No i w zasadzie nasz odtwarzacz jest już
gotowy, ale chciałbym na koniec zrobić tylko jeszcze jedną rzecz.
Otóż stąd sobie wytniemy ten serce i będę
chciał go ustawiać dynamicznie poprzez naszą funkcję.
Zobaczmy. Będzie to wyglądać tak, że ta funkcja
Create player, którą tutaj mamy, podzielimy to w ten sposób.
Chciałbym, żeby przyjmowała jeszcze drugi
parametr, gdzie przekazujemy jaki ma być adres do tego wideo?
Czyli jaki jest kontener, jaki adres?
I teraz ten adres tutaj zapiszemy jako serce.
W ten sposób i to, co jest niesłychanie ważne, to musimy najpierw po przypisywać
wszystkie eventy do tego wideo, takie jak np.
Time update czy duration, szczególnie
jeśli chodzi o Duration change, a potem ustawić na tym video jego atrybut serce
albo takim skrótem serce, albo poprzez set atrybut.
Co ja preferuję.
Serce ustawimy na przekazane do funkcji serce.
Jeżeli byśmy to zrobili wcześniej, to te
zdarzenia, które zarejestrowaliśmy takie jak np.
duration 5 nie odpaliło by się bo on by się odpalił, kiedy to serce byłoby
wczytane gdzieś w tej linijce, a my je dopiero później rejestrujemy.
Zatem trzeba je najpierw zarejestrować, potem ustawić serce i przeglądarka.
Jak będzie wczytywać to video to odpala te zdarzenia ustawione wcześniej.
Zobaczmy czy to działa tak samo.
Nie jest dokładnie tak samo i dzięki temu, że ta funkcja jest teraz taka dynamiczna
to moglibyśmy na stronie mieć więcej takich elementów, skopiować tego diva,
wstawić go poniżej i po prostu zmienić mu tylko to odwołanie.
I po tym odwołaniu tutaj się tutaj go wstawiać po prostu.
No i zmienić tą ścieżkę i wtedy na stronie mielibyśmy dwa odtwarzacze.
No i ostatnia rzecz, którą Ty mógłbyś zrobić zachęcam Cię jeżeli chcesz.
To byłoby sprawienie, że cały ten player będzie tworzony dynamicznie.
Bo teraz jeżeli komuś byśmy udostępnili nasz skrypt, to musimy również mu
powiedzieć jaki HTML ma wstawić na stronę, żeby ten skrypt mógł działać, bo
odwołujemy się do już utworzonych elementów.
Natomiast jak wiesz wszystkie te elementy
można by było stworzyć dynamicznie, ale nie chciałem, żeby te lekcje były
niepotrzebnie zbyt długie, abyśmy robili coś, co robiliśmy już w kursie wcześniej.
Ale mógłbyś tak zrobić, że ta funkcja
create element i by się podawało tylko kontener do którego chcemy wstawić video i
byłby to tylko pojedynczy utworzony na stronie element, a wszystkie elementy
włącznie z tym wideo i wszystkimi tymi drzwiami stworzył by w sposób dynamiczny.
Możesz je utworzyć za pomocą inner html, czyli mieć po prostu taki string i
wstrzyknąć go do jakiegoś diva i następnie wstawić na stronę, a potem się do nich
odwoływać lub tworzyć je z użyciem dokument Create Element.
Mam nadzieję, że ten przykład był ciekawy.
Zobaczyłeś jak kontrolować na stronie
element video i zapewniam Cię, że w przeglądarce takiej magii jest jeszcze
sporo więcej i na pewno na drodze Twojej nauki języka JavaScript i obiektowego
modelu dokumentu, a także API przeglądarek jeszcze wiele takich rzeczy odkryjesz.
W tym kursie chciałem Ci po prostu pokazać, jak wiele możliwości oferują nam
przeglądarki internetowe, kiedy używamy języka JavaScript.
Kod
Funkcja secondsToTime · 2 min
function secondsToTime(seconds) {
return [seconds / 3600, (seconds % 3600) / 60, (seconds % 3600) % 60]
.map((v) => (v < 10 ? `0${parseInt(v, 10)}` : parseInt(v, 10)))
.filter((i, j) => i !== "00" || j > 0)
.join(":");
}