Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski
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.
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.
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.
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.
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.
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.
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
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
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.
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.