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.