Multimedia w HTML5 Statyczne witryny internetowe 2TIa Marek Kwiatkowski.

Prezentacja na temat: "Multimedia w HTML5 Statyczne witryny internetowe 2TIa Marek Kwiatkowski."— Zapis prezentacji:

1 Multimedia w HTML5 Statyczne witryny internetowe 2TIa 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 i na stronie www Umiejętność używania atrybutów znaczników i, 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 HTML 5 W języku HTML 5 usunięto przestarzałe instrukcje:,,,,,,. W miejsce usuniętych dyrektyw wprowadzono nowe instrukcje:,,,,,,,,,,,,. Wersja 5 upraszcza zapis znaczników językowych (obecnie wystarczy zapis:, wcześniejszy zapis wyglądał następująco: ) 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 Zasada umieszczania plików multimedialnych w HTML 5 Aby zamieścić na stronie www plik video, należy użyć znacznika natomiast żeby zamieścić plik dźwiękowy wystarczy użyć znacznika. 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 Zasada umieszczania plików multimedialnych w HTML 5 Plik wideo Aby zamieścić na stronie www plik video, należy użyć znacznika 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 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.

7 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. PRZYKŁAD W NOTEPAD++

8 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

9 Zasada umieszczania plików multimedialnych w HTML 5 Plik wideo Przykłady

10 Zasada umieszczania plików multimedialnych w HTML 5 Plik audio W przypadku pliku dźwiękowego używamy znacznika. Podobnie jak w przypadku znacznika musimy podać jego źródło w znaczniku. Pamiętaj o dopisaniu atrybutu controls po audio! Inaczej nam się plik nie wyświetli Przykład

11 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.

12 Zasada umieszczania plików multimedialnych w HTML 5 Plik audio Spójrz na przykłady.

13 Zasada umieszczania plików multimedialnych w HTML 5 Znacznik 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. Zobacz przykład.

14 Zasada umieszczania plików multimedialnych w HTML 5 Zadanie domowe Czy na stronie internetowej, zastosowanie autostartu w plikach dźwiękowych, muzycznych jest dobrym rozwiązaniem ze strony webmastera, czy niekoniecznie? Uzasadnij swoją odpowiedź, podaj przykłady.