Pobierz plik PDF
Transkrypt
Pobierz plik PDF
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 HTML 5 • W języku HTML 5 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. Zasada umieszczania plików multimedialnych w HTML 5 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. Zasada umieszczania plików multimedialnych w HTML 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. Zasada umieszczania plików multimedialnych w HTML 5 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. Zasada umieszczania plików multimedialnych w HTML 5 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. Zasada umieszczania plików multimedialnych w HTML 5 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 Zasada umieszczania plików multimedialnych w HTML 5 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 Zasada umieszczania plików multimedialnych w HTML 5 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. Zasada umieszczania plików multimedialnych w HTML 5 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.