Aplikacje internetowe HTML 5 Wprowadzenie Autor

Roman Simiński Kontakt

[email protected] www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.

HTML 5 — co nowego (o tym słyszeli wszyscy) Różnice w stosunku do poprzedników: Uproszczenie — w zakresie tego co wcześniej zbędne lub nadmiernie zagmatwane. Rozszerzenie — o elementy praktycznie potrzebne, nieistniejące wcale bądź obsługiwane poza językiem HTML. Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu. Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. 2

HTML 5 — co nowego (o tym słyszeli wszyscy) Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu (article, footer, header, nav, section). Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. Nowe atrybuty znacznika input: tel, search, url, email, datetime, ...

3

HTML 5 — co nowego (mniej znane elementy) Mniej znane nowości: Możliwość umieszczania grafiki SVG bezpośrednio w kodzie HTML, znacznik . . .. Możliwość umieszczania wzorów MathML bezpośrednio w kodzie HTML, znacznik . . .. Oznacza to, że kody wzorów matematycznych oraz rysunków SVG mogą być zapisane bezpośrednio w kodzie HTML. Dekorowanie grafiki SVG z wykorzystaniem stylów, programowe manipulowanie za pośrednictwem JavaScript. Dostępne API do obsługi Drag-and-Drop. przechowywanie historii przeglądania, z możliwością zmiany url przeglądarki bez przeładowania strony. możliwość pracy aplikacji w trybie offline 4

Nowe znaczniki semantyczne — header, section, nav

Znacznik Znacznik opisuje opisuje nagłówek nagłówek elementu, elementu, w w którym którym został został zdefiniowany. zdefiniowany. W W tym tym przypadku przypadku oznacza oznacza nagłówek nagłówek całej całej strony, strony, ale ale może może być być używany używany w w poszczególnych poszczególnych sekcjach sekcjach dokumentu. dokumentu. Nie Nie używamy używamy tego tego znacznika znacznika wewnątrz wewnątrz znaczników znaczników , , , , innego innego znacznika znacznika . .



Sekcja Sekcja zwiera zwiera zwykle zwykle hiperłącza hiperłącza do do poszczególnych poszczególnych sekcji sekcji strony. strony. Zakłada Zakłada się, się, że że zawiera zawiera główne główne linki linki nawigacyjne nawigacyjne na na stronie. stronie. Znacznik Znacznik definiuje definiuje blok blok dokumentu, dokumentu, który który może może zawierać zawierać wszelkie wszelkie adekwatne adekwatne znaczniki, znaczniki, w w tym tym również również wielokrotnie wielokrotnie zagnieżdżone zagnieżdżone bloki bloki . .



Copyright © Roman Simiński

5

Nowe znaczniki semantyczne — aside, footer

Znacznik Znacznik definiuje definiuje dodatkową, dodatkową, „poboczną” „poboczną” treść treść w w stosunku stosunku do do głównej głównej treści treści prezentowanej prezentowanej w w dokumencie. dokumencie. Zazwyczaj Zazwyczaj w w obrębie obrębie znacznik znacznik umieszczany umieszczany jest jest jako jako panel panel boczny boczny — — np. np. zz linkami linkami powiązanymi powiązanymi zz prezentowaną prezentowaną treścią. treścią. Znacznik Znacznik definiuje definiuje stopkę stopkę strony, strony, zawierającą zawierającą zazwyczaj zazwyczaj informacje informacje oo autorze autorze stron, stron, prawach prawach autorskich, autorskich, licencjach, licencjach, informacje informacje kontaktowe. kontaktowe. zwyczajowo zwyczajowo nagłówek nagłówek jest jest elementem elementem domykającym domykającym układ układ strony strony od od dołu. dołu.

6

Nowe znaczniki semantyczne — article .. .. .. Tytuł Tytuł nagłówka nagłówka Jaka Jakaśś dodatkowa dodatkowa

artykułu artykułu tre treśśćć ii np. np. link: link: więęcej... cej...

Znacznik Znacznik article article reprezentuje reprezentuje pewn pewnąą zamkni zamknięęttąą cało całośść, ć, która która mo możżee być być traktowana traktowana niezale niezależżnie nie od od całej całej strony, strony, np. np. wpis wpis blogowy, blogowy, artykuł, artykuł, komentarz. komentarz. .. .. ..

Przy Przy okazji okazji — — znacznik znacznik wyróżnienia wyróżnienia fragmentu fragmentu tekstu. tekstu.

7

Nowe znaczniki semantyczne — details i summary .. .. .. Czytaj Czytaj wi więęcej... cej... Znaczniki Znaczniki details details ii summary. summary. Aktualnie Aktualnie zaimplementowane zaimplementowane jedynie jedynie ww Chrome. Chrome. .. .. ..

Na Na razie razie tylko tylko Chrome Chrome

Znacznik Znacznik określa określa dodatkową dodatkową informację, informację, którą którą użytkownik użytkownik może może zobaczyć zobaczyć lub lub ukryć ukryć na na życzenie. życzenie. Sterowanie Sterowanie pokazywaniem/ukrywaniem pokazywaniem/ukrywaniem zawartości zawartości steruje steruje atrybut atrybut boolowski boolowski open. open. Znacznik Znacznik określa określa widoczny widoczny nagłówek nagłówek sekcji sekcji . . 8

Nowe znaczniki semantyczne — meter i progress 40%

Gdy Gdy brak brak implementacji implementacji

Opera, Opera, Chrom Chrom

Znacznik Znacznik definiuje definiuje wskaźnik, wskaźnik, np. np. zużycie zużycie przestrzeni przestrzeni dyskowej, dyskowej, page page rank, rank, wynik wynik ankiety. ankiety. Uwaga Uwaga — — nie nie używa używa się się jako jako paska paska postępu, postępu, do do tego tego jest jest . . Ładowanie: 11% 11%

Gdy Gdy brak brak implementacji implementacji

Opera, Opera, Chrom, Chrom, Firefox Firefox

9

Sterowanie elementem progress — prosty przykład .. .. .. var var timeoutObject; timeoutObject; var sek var sek == 0; 0; function display() function display() {{ document.getElementById( document.getElementById( "pb" "pb" ).value ).value == sek++; sek++; if( if( sek sek >> 100 100 )) zeruj(); zeruj(); }} function function start() start() {{ display(); display(); window.timeoutObject window.timeoutObject == setInterval( setInterval( "display()", "display()", 100 100 )) }} function function stop() stop() {{ window.clearInterval( window.clearInterval( timeoutObject timeoutObject ); ); }} function function zeruj() zeruj() {{ document.getElementById( document.getElementById( "pb" "pb" ).value ).value == sek sek == 0; 0; }} .. .. .. Progress Progress bar bar

10

Nowe znaczniki semantyczne — figure i figurecaption To To jest jest globus globus .. .. .. To To jest jest globus globus

Znacznik Znacznik opisuje opisuje zawartość zawartość taką taką jak jak ilustracja, ilustracja, zdjęcie, zdjęcie, rysunek, rysunek, diagram, diagram, fragment fragment kodu kodu programu. programu. Znacznik Znacznik określa określa legendę legendę elementu elementu w w , , może może stanowić stanowić nagłówek nagłówek lub lub podpis. podpis. 11

Nowe znaczniki semantyczne — audio Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

controls — wyświetlanie panelu sterowania odtwarzaniem, autoplay — automatyczne odtwarzanie od razy, gdy to możliwe,

MSIE Opera Chrome

loop — powtarzanie odtwarzania. preload — wskazówka dla przeglądarki: jak postępować z dźwiękiem w trakcie ładowania strony: auto — ładowanie pliku w trakcie ładowania strony; metadata – ładowanie metadanych w trakcie ładowania strony; none — plik nie powinien być ładowany w trakcie ładowania strony. Dla autoplay = true atrybut preload jest ignorowany. 12

Nowe znaczniki semantyczne — audio + source Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

Nieobowiązkowe Nieobowiązkowe

Zaleca się stosowanie znacznika dla and — pozwala to na określanie alternatywnych plików źródłowych dla multimediów, przeglądarka może wybrać określony typ np. w zależności od wykorzystywanych kodeków. type — określa typ MIME dla pliku (dla audio zwykle: audio/ogg, audio/mpeg). Znaczenie atrybutu src jest oczywiste, kolejny atrybut media nie jest aktualnie obsługiwany w żadnej ze znanych przeglądarek.

13

audio + source versus audio scr Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

Dynamiczna modyfikacja elementu source i jego atrybutów po wstawieniu go do elementu audio (video również) nie przynosi oczekiwanych rezultatów. Zaleca się stosowanie atrybutu src lub wykorzystania funkcji load().

14

Nowe znaczniki semantyczne — sterowanie elementem audio .. .. .. function function playSound() playSound() {{ var var audioItem audioItem == document.getElementById( document.getElementById( "player" "player" ); ); if( if( audioItem audioItem )) audioItem.play(); audioItem.play(); }} function function pauseSound() pauseSound() {{ var var audioItem audioItem == document.getElementById( document.getElementById( "player" "player" ); ); if( if( audioItem audioItem )) audioItem.pause(); audioItem.pause(); }} .. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. 15

Na marginesie — rożne odwołania do elementów function function playSound() playSound() {{ var var audioItem audioItem == document.getElementById( document.getElementById( "player" "player" ); ); if( if( audioItem audioItem )) audioItem.play(); audioItem.play(); }}

function function playSound() playSound() {{ document.getElementById( document.getElementById( "player" "player" ).play(); ).play(); }}

16

Pokazywanie/ukrywanie panelu sterującego — controls function function playSound() playSound() {{ var var audioElement audioElement == document.getElementById( document.getElementById( "player" "player" ); ); if( audioElement ) if( audioElement ) {{ audioElement.controls audioElement.controls == true; true; audioElement.play(); audioElement.play(); }} }} .. .. .. function function toggleControls() toggleControls() {{ var var audioElement audioElement == document.getElementById( document.getElementById( "player" "player" ); ); if( audioElement ) if( audioElement ) audioElement.controls audioElement.controls == !audioElement.controls; !audioElement.controls; }} .. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

17

Więcej na temat audio, przykład .. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. .. .. ..

18

Więcej na temat audio, przykład, cd ... function function playSound() playSound() {{ var var audioElement audioElement == document.getElementById( document.getElementById( "player" "player" ); ); var var var var var var

}}

fileInfo fileInfo durationInfo durationInfo volumeInfo volumeInfo

== == ==

document.getElementById( document.getElementById( document.getElementById( document.getElementById( document.getElementById( document.getElementById(

"filename" "filename" ); ); "duration" ); "duration" ); "volume" "volume" ); );

fileInfo.innerHTML fileInfo.innerHTML == audioElement.src; audioElement.src; durationInfo.innerHTML durationInfo.innerHTML == audioElement.duration.toFixed( audioElement.duration.toFixed( 22 ); ); volumeInfo.innerHTML = audioElement.volume.toFixed( 2 ); volumeInfo.innerHTML = audioElement.volume.toFixed( 2 ); audioElement.play(); audioElement.play();

function function pauseSound() pauseSound() {{ document.getElementById( document.getElementById( "player" "player" ).pause(); ).pause(); }}

19

Więcej na temat audio, przykład, cd ... function function changeVolume( changeVolume( steep steep )) {{ var var audioElement audioElement == document.getElementById( document.getElementById( "player" "player" ); ); var == document.getElementById( var volumeInfo volumeInfo document.getElementById( "volume" "volume" ); ); audioElement.volume audioElement.volume += += steep; steep; volumeInfo.innerHTML = audioElement.volume.toFixed( volumeInfo.innerHTML = audioElement.volume.toFixed( 22 ); ); }} function function setRepeat() setRepeat() {{ document.getElementById( document.getElementById( "player" "player" ).loop ).loop == true; true; }}

20

Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku.

21

Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku .. .. .. function function showCurrTime() showCurrTime() {{ document.getElementById( document.getElementById( document.getElementById( document.getElementById( }}

"current" "current" ).innerHTML ).innerHTML == "player" "player" ).currentTime.toFixed( ).currentTime.toFixed( 22 ); );

.. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. .. .. ..

22

Wykorzystanie audio i dynamicznie dodanego elementu progress var var progressBar progressBar == null; null; function function initProgressBar( initProgressBar( duration duration )) {{ progressBar progressBar == document.createElement( document.createElement( 'progress' 'progress' ); ); document.body.appendChild( document.body.appendChild( progressBar progressBar ); ); progressBar.value progressBar.value == 0; 0; progressBar.max = duration; progressBar.max = duration; }}

function function playSound() playSound() {{ .. .. .. volumeInfo.innerHTML volumeInfo.innerHTML == audioElement.volume.toFixed( audioElement.volume.toFixed( 22 ); ); if( if( progressBar progressBar == == null null )) initProgressBar( initProgressBar( audioElement.duration audioElement.duration ); ); audioElement.play(); audioElement.play(); }} function function showCurrTime() showCurrTime() {{ .. .. .. progressBar.value progressBar.value == document.getElementById( document.getElementById( "player" "player" ).currentTime; ).currentTime; }} 23

Dynamicznie dodawany element audio i progress Wybierz: Wybierz: Rock Jazz Folk Folk

24

Dynamicznie dodawany element audio i progress var var progressBar progressBar == null; null; var var audioElement audioElement == null; null;

*

function function showProgres() showProgres() {{ progressBar.max progressBar.max == audioElement.duration; audioElement.duration; progressBar.value progressBar.value == audioElement.currentTime; audioElement.currentTime; }}

function function playSong( playSong( songName songName )) {{ if( if( audioElement audioElement == == null null )) {{ audioElement audioElement == new new Audio(); Audio(); document.body.appendChild( document.body.appendChild( audioElement audioElement ); ); audioElement.addEventListener( "timeupdate", audioElement.addEventListener( "timeupdate", showProgres, showProgres, true true ); ); }} audioElement.src audioElement.src == songName; songName; if( if( progressBar progressBar == == null null )) {{ progressBar progressBar == document.createElement( document.createElement( "progress" "progress" ); ); document.body.appendChild( progressBar ); document.body.appendChild( progressBar ); }} if( if( progressBar.hidden progressBar.hidden )) progressBar.hidden progressBar.hidden == false; false; }}

*

audioElement.play(); audioElement.play();

function function pauseSound() pauseSound() {{ audioElement.pause(); audioElement.pause(); progressBar.hidden progressBar.hidden == true; true; }}

25

Różne sposoby tworzenia elementu audio Wykorzystanie konstruktorów: audioElement audioElement == new new Audio(); Audio(); audioElement.src audioElement.src == 'rock_s.ogg'; 'rock_s.ogg'; document.body.appendChild( document.body.appendChild( audioElement audioElement ); ); .. .. ..

audioElement audioElement == new new Audio( Audio( 'rock_s.ogg' 'rock_s.ogg' ); ); document.body.appendChild( document.body.appendChild( audioElement audioElement ); ); .. .. ..

Wykorzystanie funkcji createElement(): audioElement audioElement == document.createElement( document.createElement( 'audio' 'audio' ); ); audioElement.src audioElement.src == 'rock_s.ogg'; 'rock_s.ogg'; document.body.appendChild( document.body.appendChild( audioElement audioElement ); ); .. .. ..

26

Istnieje znacznie więcej możliwości programowej obsługi Do wykrywania czy odtwarzanie trwa czy też zostało wstrzymane służy właściwość paused. function function audio_play_pause() audio_play_pause() {{ var var audioElement audioElement == document.getElementById("player"); document.getElementById("player"); if( if( audioElement.paused audioElement.paused )) audioElement.play(); audioElement.play(); else else audioElement.pause(); audioElement.pause(); }}

Jest jeszcze dużo więcej, choć oficjalnie jakby nie ma...: http://www.w3.org/wiki/HTML/Elements/audio https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox http://dev.opera.com/articles/view/everything-you-need-to-know-abouthtml5-video-and-audio/

Copyright © Roman Simiński

27

Odtwarzanie sekwencji wideo — element video

Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo.

Większość atrybutów znanych ze znacznika audio występuje również dla znacznika video. Chrome

FireFox

Opera

Wykorzystanie znacznika source: Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. 28

Atrybut poster Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo.

Gdy autoplay == false, atrybut poster pozwala określić obraz który będzie pokazywany do czasu wybrania gdy użytkownik nie naciśnie przycisku odtwarzania. Obraz ten jest również wyświetlany podczas ściągania sekwencji wideo. Gdy obraz nie zostanie określony, wykorzystywana jest pierwsza klatka filmu.

29

Atrybuty width i height Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo.

30

Atrybuty width i height — uwagi Atrybuty height i width określają odpowiednio, liczoną w pikselach, wysokość i szerokość elementu video. Zaleca się określanie wartości opu parametrów, co pozwala przeglądarce na zarezerwowanie odpowiedniego obszaru podczas ładowania strony. Brak tych wartości powoduje często zmiany układu strony — przeglądarka określi rozmiar ostateczny rozmiar obczaru dopiero po załadowaniu sekwencji wideo. Atrybuty height i width nie służą do zmiany (a w szczególności zmniejszenia wymiarów) sekwencji wideo. I tak zostanie pobrany plik w jego oryginalnej wersji, nawet jeżeli ma być wyświetlony w polu o małych wymiarach. Przeskalowanie obrazu powinno wyć wykonywane przy użyciu odpowiedniego oprogramowania przed zamieszczeniem sekwencji wideo na serwerze. Przy okazji — istnieje atrybut muted, pozwalający na wyciszenie ścieżki audio w sekwencji wideo, ale nie jest aktualnie obsługiwany przez żadną z przeglądarek. 31

Atrybuty width i height — uwagi, cd. ... Jeżeli ustawione wartości atrybutów width i height nie pasują do proporcji obrazu wideo, obraz ten nie jest dopasowywany do ustalonych wymiarow. Obraz wideo zachowuje swoje proporcje i jest maksymalizowany w obszarze elementu video. Wymiary podaje się w pikselach bez podawania jednostki, inne jednostki mogą być używane z wykorzystaniem mechanizmu stylów CSS.

300

200

Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo.

32

Ładowanie sekwencji wideo i atrybut preload Przeglądarki bardzo podchodzą do sprawy ładowania sekwencji wideo. Opera, Chrome i Safari automatycznie pobierają sekwencję wideo nawet gdy nie jest automatycznie odtwarzana. FireFox pobiera tyle, by określić pierwszą ramkę i czas trwania, być może aktualnie Opera czyni podobnie. Zastosowanie autoplay powoduje, że wideo jest ładowane tak szybko, jak to możliwe. Atrybut preload niekoniecznie jest dobrze interpretowany przez przeglądarki. Aby uzyskać efekt preload="none" można: Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. 33

Pobieranie informacji na temat rozmiarów obrazu wideo Atrybuty videoWidth i videoHeight pozwalają na pobranie wewnętrznych rozmiarów sekwencji wideo. .. .. .. function function showInfo() showInfo() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var info = document.getElementById("info"); var info = document.getElementById("info"); info.innerHTML info.innerHTML == player.videoWidth player.videoWidth ++ "x" "x" ++ player.videoHeight; player.videoHeight; }} .. .. .. .. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. .. .. ..

34

Wykrywanie informacji o obsłudze formatów Nawet gdy element video jest obsługiwany, może się zdażyć że nie są obslugiwane konkretne kodeki. Dla elementu video istnieje metoda canPlayType() pozwalająca na wykrywanie obsługiwanych formatów. W przypadku gdy dany format nie jest obsługiwany, generowane jest zdarzenie informujące o błędzie — można zdefiniować obsługę tego zdarzenia. MSIE

FireFox

35

Metod canPlayType() function function showSupport() showSupport() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var == document.getElementById("info"); var info info document.getElementById("info"); var var str; str; str str == "video/ogg: "video/ogg: "" ++ player.canPlayType('video/ogg') player.canPlayType('video/ogg') ++ "
"; str += "video/mp4: " + player.canPlayType('video/mp4') + "
"; str += "video/mp4: " + player.canPlayType('video/mp4') + "
"; info.innerHTML info.innerHTML == str; str; }} .. .. .. Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo. .. .. ..

MSIE

Chrome

FireFox

36

Metod canPlayType() function function showSupport() showSupport() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var == document.getElementById("info"); var info info document.getElementById("info"); var var str; str; str str == "video/ogg: "video/ogg: "" ++ player.canPlayType('video/ogg') player.canPlayType('video/ogg') ++ "
"; str += "video/ogg codecs=theora, vorbis: " str += "video/ogg codecs=theora, vorbis: " ++ player.canPlayType('video/ogg; player.canPlayType('video/ogg; codecs="theora, codecs="theora, vorbis"') vorbis"') ++ "
"; info.innerHTML info.innerHTML == str; str; }} .. .. .. Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo. .. .. ..

37

Pobieranie informacji o odtwarzanej sekwencji function function setDuration() setDuration() {{ var var duration duration == document.getElementById("player").duration; document.getElementById("player").duration; document.getElementById("durInfo").innerHTML document.getElementById("durInfo").innerHTML == "Cało "Całośść: ć: "" ++ duration.toFixed(2); duration.toFixed(2); document.getElementById("bar").max document.getElementById("bar").max == duration; duration; }} function function showInfo() showInfo() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var == document.getElementById("currInfo"); var info info document.getElementById("currInfo"); var bar = document.getElementById("bar"); var bar = document.getElementById("bar"); info.innerHTML info.innerHTML == "Aktualnie: "Aktualnie: "" ++ player.currentTime.toFixed(2); player.currentTime.toFixed(2); bar.value = player.currentTime; bar.value = player.currentTime; }} .. .. .. Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo.

38

Sterowanie odtwarzaną sekwencją — ustawianie currentTime .. .. .. function function rewindVideo() rewindVideo() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var var bar bar == document.getElementById("bar"); document.getElementById("bar"); player.currentTime player.currentTime == bar.value; bar.value; }} .. .. .. Ta przegl Ta przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. .. .. ..

39

Sterowanie odtwarzaną sekwencją — start, pause .. .. .. function function rewindVideo() rewindVideo() {{ var var player player == document.getElementById("player"); document.getElementById("player"); var var bar bar == document.getElementById("bar"); document.getElementById("bar"); player.currentTime player.currentTime == bar.value; bar.value; }} .. .. .. Ta przegl Ta przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. .. .. ..

40

Ciąg dalszy nastąpi...

41