• Artykuł

          

Kurs HTML5 - WebMatrix - Multimedia  Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2011-12-01

Dzisiejsze strony internetowe muszą nie tylko dobrze wyglądać, ale zawierać również treści multimedialne. Często na swoich prywatnych stronach internetowych chcesz pochwalić się filmem z wakacji, a na stronach firmowych pokazać odpowiednie produkty. HTML w wersji 4 i poprzednich nie umożliwiał łatwego umieszczania takich treści. Aby je odtwarzać, musiałeś wykorzystywać aplikacje, napisane w Silverlight czy Flash. Dzisiaj masz już HTML5, który zawiera nowe możliwości.

Po wykonaniu zadań nauczysz się:

  • dodawać materiał audio i wideo do strony internetowej,
  • sprawdzać, jak strona będzie wyświetlona w wersji Internet Explorer 8,
  • jak wspierać starsze przeglądarki.

Implementacja

W tym ćwiczeniu nauczysz się dodawać do strony internetowej elementy audio i video. Poznasz problemy, wynikające ze wsparcia starszych przeglądarek oraz nauczysz się wykorzystywać narzędzia programistyczne w Internet Explorer 8.

Efekt końcowy został przedstawiony na Rys. 1.

 

Rys. 1. Efekt końcowy ćwiczenia.

Przygotowanie strony

Pierwszym krokiem będzie utworzenie pliku HTML.

  1. W programie WebMatrix utwórz nową stronę i nazwij ją Multimedia.
  • Uruchom program WebMatrix.
  • Kliknij przycisk Templates.
  • Wybierz szablon Empty Site i w polu Site Name wpisz Multimedia (Rys. 2.).

 

Rys. 2. Dodanie nowego projektu w WebMatrix.

  • Kliknij przycisk OK.
  • Następnie kliknij przycisk Files.
  • Prawym przyciskiem myszki kliknij plik Default.cshtml. Następnie kliknij Delete. W oknie, które się otworzy, potwierdź chęć usunięcia pliku.
  1. Dodaj nowy plik do projektu w WebMatrix.
  • Na wstążce Home kliknij New, a następnie New File.
  • Na liście dostępnych typów plików kliknij HTML, a następnie jako nazwę określ index.html. (Rys. 3.).

 

Rys. 3. Dodanie pliku html w WebMatrix.

  1. Określ tytuł i język strony. W tym przypadku będzie to język polski.
  • W znaczniku html ustaw parametr lang="pl".
  • W znaczniku title wpisz:

Multimedia w WebMatrix

Umieszczenie materiału wideo na stronie

Jak zapewne wiesz, materiał wideo może być zapisany w jednym z formatów (np. MPEG). Do odtwarzania tego materiału potrzebne są odpowiednie kodeki. Na utworzonej przez Ciebie stronie internetowej nie chciałbyś zmuszać użytkownika do pobierania dodatkowego oprogramowania. Producenci przeglądarek udostępniają wybrane formaty wideo (Tab. 1.).

Tab. 1. Wsparcie formatów wideo przez przeglądarki

 Format Internet Explorer Mozilla Firefox Google Chrome Safari Opera
Ogg Theora Nie (Użytkownik może ręcznie zainstalować) 3.5 3.0 Nie (Użytkownik może ręcznie zainstalować) 10.50
H.264 9.0 Nie Nie 3 Nie
VP8 (WebM) Nie (Użytkownik może ręcznie zainstalować) 4.0 6.0 Nie (Użytkownik może ręcznie zainstalować) 10.60

Z analizy tabelki wynika, że żaden format nie jest wspierany przez wszystkie przeglądarki. Z tego względu musisz zapewnić, że na Twojej stronie internetowej, materiał będzie dostępny w co najmniej dwóch formatach, np. H.264 i VP8 (WebM). Dodatkowo musisz pamiętać, że są też użytkownicy, którzy używają starszych przeglądarek, np. Internet Explorer 6.0.Im również musisz ułatwić dostęp do Twojego materiału wideo.

W ćwiczeniu będziesz potrzebował materiału wideo, możesz do tego celu wykorzystać Twój film, zakodowany za pomocą odpowiednich kodeków, lub pobrać film Big Buck Bunny. Jeśli wykorzystasz Twój film, przejdź do kroku 2.

  1. Pobierz przykładowy plik Big Buck Bunny.

 

Rys. 4. Katalog z plikami projektu WebMatrix.

  1. Dodanie znacznika video.
  • Umieść kursor w znacznikach body.
  • Wpisz "<"
  • Z listy dostępnych elementów wybierz video.
  • Wciśnij spację. Z listy dostępnych właściwości wybierz controls.
  • Wpisz ">"
Informacja
WebMatrix posiada bardzo dobre wsparcie dla programisty. Po podaniu fragmentu nazwy znacznika możesz wybrać go z listy. Jeśli lista zniknie, to możesz ją wywołać za pomocą klawiszy CTRL+Spacja. Znacznik zamykający po wpisaniu ">" dodaje Środowisko, również automatycznie.
  1. Dodanie listy plików do odtwarzania.
  • Wciśnij przycisk Enter.
  • Wpisz "<"
  • Z listy dostępnych elementów wybierz source.
  • Wciśnij spację. Z listy dostępnych właściwości wybierz src.
  • Wpisz "=". Następnie w automatycznie dodanym cudzysłowie wpisz:
    video/BigBuck.mp4
  • Za cudzysłowem wpisz "/>".
  • Podobnie dodaj drugi format – określ źródło jako video/BigBuck.ogg.
  • Zapisz plik i sprawdź, czy wygląda on tak, jak na Rys.5.

 

Rys. 5. Dodanie znacznika video w WebMatrix.

  1. Sprawdź wynik działania w przeglądarce.
  • Prawym przyciskiem kliknij plik index.html i wybierz opcję Show in Windows Explorer.
  • W oknie eksplorera kliknij dwukrotnie na plik index.html. Sprawdź, czy wyświetliło się okienko i czy możesz odtworzyć film tak, jak na Rys. 6.

 

Rys. 6. Odtwarzacz wideo w Internet Explorer.

  1. Dodaj plakat wyświetlany po wejściu na stronę (zamiast czarnego prostokąta).
  • Przejdź do programu WebMatrix. Ustaw kursor za właściwością controls.
  • Dodaj spację i z listy właściwości wybierz poster.
  • Wpisz "=". Następnie w automatycznie dodanym cudzysłowie wpisz:
    video/poster.png
  • Zapisz plik i sprawdź w przeglądarce, czy po odświeżeniu strony widać obrazek.
  1. Sprawdź, jak będzie się zachowywała Twoja strona w starszych przeglądarkach.
  • W przeglądarce Internet Explorer wciśnij przycisk F12 lub wybierz "F12 developer tools".
  • Z listy dostępnych przeglądarek wybierz Browser Mode IE8 i sprawdź, czy na stronie został wyświetlony plakat i czy można odtwarzać film.
Informacja
Starsze przeglądarki wymagają użycia odtwarzacza napisanego w Silverlgiht lub Flash.
  1. Dodaj odtwarzacz w Silverlight.
  • Przejdź do programu WebMatrix. Ustaw kursor za ostatnim znacznikiem source i dodaj nową linię.
  • W nowej linii wklej:
<object type="application/x-silverlight-2" height="180" width="320">
  <param name="source" value="video/player.xap">
  <param name="initParams" value="deferredLoad=true,duration=0,m=video/video.mp4,autostart=false,autohide=true,showembed=true,postid=0">
  <param name="background" value="#00FFFFFF">
</object>
  • Zapisz zmiany. Odśwież stronę w przeglądarce. Sprawdź, czy pojawił się odtwarzacz w Silverlight i czy można odtworzyć plik.

 

Rys. 7. Wsparcie starszych przeglądarek – odtwarzacz w Silverlight.

Umieszczenie materiału audio na stronie

Materiał audio także może być zakodowany różnymi kodekami. Producenci przeglądarek udostępniają wybrane formaty audio (Tab. 2.).

Tab. 2. Wsparcie formatów audio przez przeglądarki.

 Format audio Internet Explorer Mozilla Firefox Google Chrome Safari Opera
Ogg Vorbis Nie Tak Tak Nie Tak
MP3 Tak Nie Tak Tak Nie
Wav Nie Tak Tak Tak Tak
  1. Dodanie znacznika video.
  • Poniżej znacznika video dodaj:
<br />
<audio controls autoplay>
   <source src="video/BigBuck.mp3" type="audio/mpeg" />
    Twoja przeglądarka nie umożliwia odtwarzania plików audio.
    <a href="video/BigBuck.mp3">Pobierz plik</a> 
</audio>
  • Zapisz stronę i odśwież ją w przeglądarce. Sprawdź, czy wygląda tak, jak na Rys. 8.

 

Rys. 8. Wsparcie starszych przeglądarek – możliwość pobrania pliku.

Informacja
Nie zawsze musisz lub chcesz udostępniać użytkownikowi starszej przeglądarki nowych funkcjonalności. W tym przypadku możesz napisać komunikat o braku wsparcia i konieczności zainstalowania nowszej wersji przeglądarki.
  • Zmień ustawienia Browser Mode na IE9
  • Zapisz zmiany i sprawdź, czy strona wygląda tak, jak na Rys. 1.

Podsumowanie

W tym samouczku nauczyłeś się dodawać elementy audio i wideo do strony internetowej. Dowiedziałeś się, w jaki sposób można wspierać starsze wersje przeglądarek. Nauczyłeś się również wykorzystywać narzędzia programistyczne w Internet Explorer 9.

W kolejnym samouczku nauczysz się rysować i animować grafikę na elemencie Canvas.