Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski

Transkrypt

1 Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski

2 Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5 ułatwiających załączanie plików multimedialnych takich jak dźwięk i obraz wideo Umiejętność użycia znaczników <audio> i <video> na stronie www Umiejętność używania atrybutów znaczników <audio> i <video>, by w sposób precyzyjny zarządzać dodatkowymi funkcjami pliku jak np. możliwość jego powtarzania, głośność, wielkość obszaru itp.

3 Różnice między HTML 4 a W języku usunięto przestarzałe instrukcje: <basefront>, <big>, <center>, <strike>, <frame>, <frameset>, <tt>. W miejsce usuniętych dyrektyw wprowadzono nowe instrukcje: <article>, <header>, <details>, <figure>, <nav>, <section>, <mark>, <time>, <audio>,<video>, <source>, <bdo>, <rp>. Wersja 5 upraszcza zapis znaczników językowych (obecnie wystarczy zapis: <meta charset= UTF-8 />, wcześniejszy zapis wyglądał następująco: <meta httpequiv= content-type content= text/html;charset=utf-8 />) Wprowadzono moduł API i kompleksową obsługę multimediów. Rozbudowano formularze. Zniesiono zasadę obowiązkowego zamykania znaczników (pomocne dla zapominalskich webmasterów) i pustych komend.

4 Aby zamieścić na stronie www plik video, należy użyć znacznika <video> natomiast żeby zamieścić plik dźwiękowy wystarczy użyć znacznika <audio>. Nie są wówczas potrzebne żadne dodatkowe wtyczki, bowiem wyżej wymienione znaczniki dostarczają również odtwarzacze tych plików. Oczywiście, bardziej zaawansowane/skomplikowane projekty nadal wymagają użycia dodatkowych narzędzi.

5 Plik wideo Aby zamieścić na stronie www plik video, należy użyć znacznika <video> a w atrybucie src, czyli źródło, podać ścieżkę pliku z filmem oraz jednocześnie ustalić wysokość i szerokość wyświetlanego odtwarzacza.

6 Plik wideo Za pomocą właściwości poster można określić ścieżkę do obrazka (w formie okładki) do danego pliku video, który chcemy zamieścić na stronie internetowej. Okładka taka wyświetla się w czasie ładowania filmu do przeglądarki.

7 Plik wideo Należy w wymiarach okładki uwzględnić rozdzielczość filmu, ponieważ właśnie ten plik graficzny zostanie dopasowany do obszaru, którego rozmiar wpiszemy w kodzie znacznika.

8 Plik wideo Zastosowanie atrybutów. autoplay automatyczne odtwarzanie controls wyświetlenie panelu sterowania video loop zapętlanie się odtwarzacza wideo autobuffer automatyczne buforowanie wideo preload wczytanie wideo wraz z załadowaniem strony

9 Plik audio W przypadku pliku dźwiękowego używamy znacznika <audio>. Podobnie jak w przypadku znacznika <video> musimy podać jego źródło w znaczniku <source src>. Pamiętaj o dopisaniu atrybutu controls po audio! Inaczej nam się plik nie wyświetli

10 Plik audio Podobnie jak w przypadku pliku video stosujemy atrybuty controls, autoplay, loop, muted W przypadku plików dźwiękowych, możemy wybrać jeden z trzech typów plików audio WAVE, MP3, OGG. Możemy nawet połączyć wszystkie te trzy typy na stronie. Przeglądarka wówczas wybierze ten, który obsługuje.

11 Znacznik <canvas> Znacznik ten służy do tworzenia grafiki rastrowej na stronach www. Dzięki niemu możemy rysować grafikę w czasie rzeczywistym. Definiowany jest prostokąt na ekranie, tzw. płótno w którym tworzony jest rysunek.