• Artykuł

          

Samouczek: Multimedia w HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-13

Typowym zadaniem przy projektowaniu interaktywnej strony internetowej jest umieszczenie na niej multimediów, takich jak obrazki, dźwięki, klipy wideo i aplikacje. One sprawiają, że strona „żyje”, wyróżnia się na tle innych, statycznych stron i przez to jest bardziej atrakcyjna dla czytelnika. Należy jednak pamiętać, że nadmiar elementów multimedialnych oraz włączający się dźwięk w tle może być irytujący i zniechęcać do odwiedzania tej strony.

W naszym zadaniu zajmiemy się umieszczaniem na stronie elementów multimedialnych za pomocą znacznika embed. Dodatkowo osadzimy klipy wideo z portali YouTube, Channel 9 i TechNet Edge.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • umieszczać na stronie elementy multimedialne,
  • osadzać klipy wideo z portali YouTube, Channel 9 i TechNet Edge.

Implementacja

W naszym zadaniu zajmiemy się umieszczaniem elementów multimedialnych za pomocą znacznika embed. Dodamy kolejno dźwięk oraz film, na końcu nauczymy się osadzać klipy wideo z portali YouTube, Channel 9 i TechNet Edge.

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

Rys. 1. Dodane elementy do strony: obrazek, plik audio, plik wideo, aplikacja Silverlight.

Przygotowanie strony

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Multimedia w HTML</title>
    </head>
    <body>
    </body>
</html>
  1. Zapisz plik pod nazwą index.html i otwórz go w przeglądarce internetowej.
  2. W katalogu, w którym zapisałeś plik index.html, umieść dowolny plik dźwiękowy. Przykładowe dźwięki w systemie Windows 7 możesz znaleźć w katalogu C:\Users\Public\Music\Sample Music.
  3. W tym samym katalogu umieść dowolny klip wideo. Przykładowy klip w systemie Windows 7 możesz znaleźć w katalogu C:\Users\Public\Videos\Sample Videos.

Dźwięk

Za pomocą znacznika object można umieścić na stronie okienko odtwarzające plik dźwiękowy. Może on odtwarzać się automatycznie lub może zaistnieć konieczność ręcznego odtwarzania (wymagany parametr <param name="autostart" value="false" /> pomiędzy znacznikami object).

  1. Dodaj plik dźwiękowy.
  • W pliku index.html ,w znaczniku body, wpisz:
<p><embed src="Kalimba.mp3" autostart="false" height="38px" ></embed></p>
  • W miejsce nazwa_pliku.rozszerzenie wpisz nazwę wraz z rozszerzeniem pliku dźwiękowego, umieszczonego w tym samym katalogu, co plik index.html.
  1. Zapisz zmiany w pliku index.html, następnie odśwież go w przeglądarce i sprawdź, czy plik został prawidłowo dodany.
Informacja

Atrybuty znacznika embed:

  • autostart – określa automatyczne odtwarzanie muzyki, przyjmuje wartości true lub false,
  • hidden – określa, czy widoczne są dla użytkownika opcje sterowania dźwiękiem,
  • loop – umożliwia zapętlanie utworu (wartość true),
  • playcount – określa liczbę odtworzeń utworu, np. playcount="3" – utwór zostanie odtworzony trzykrotnie,
  • volume – określa poziom głośności początkowej w zakresie od 0 do 100.

Klipy wideo

Dodawanie klipów wideo niewiele różni się od dodawania dźwięku. Klip wideo, podobnie jak plik dźwiękowy, zostanie odtworzony w oknie na stronie.

  1. Dodaj klip wideo.
  • Dodaj znak przejścia do następnej linii <br /> i pod kodem, za pomocą którego wstawia się plik dźwiękowy, wpisz:
<p><object data="nazwa_pliku.rozszerzenie"></object></p>
  • W miejsce nazwa_pliku.rozszerzenie wpisz nazwę wraz z rozszerzeniem klipu wideo, umieszczonego w tym samym katalogu, co plik index.html.
  1. Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i sprawdź, czy klip prawidłowo się odtwarza.

Klipy wideo z portali YouTube, Channel 9 i TechNet Edge

Zamiast umieszczać klipy wideo na naszej stronie coraz częściej publikuje się je na portalach YouTube, Channel9 lub Edge. Dzięki temu nasz materiał może oglądać setki tysięcy użytkowników jednocześnie. Portale te umożliwiają łatwe osadzanie materiału na naszej stronie.

  1. Wejdź na stronę http://www.youtube.com/watch?v=RJjemADg0D4
  2. Poniżej klipu wideo odnajdź przycisk Share (oznaczony czerwonym prostokątem na Rys.2.) i wciśnij go.
  3. Poniżej widocznej ramki z adresem odnajdź przycisk Embed (oznaczony czerwonym prostokątem na Rys.2.) i wciśnij go.

Rys.2. Udostępnianie klipu wideo w YouTube.

  1. Skopiuj fragment kodu, wyświetlonego w ramce (oznaczony czerwonym prostokątem na Rys.3.).

Rys. 3. Kod umożliwiający osadzenie klipu YouTube na stronie.

  1. Do strony index.html wklej w nowej linii skopiowany fragment.
  2. Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i sprawdź, czy klip prawidłowo się odtwarza.
  3. Wejdź na stronę https://technet.microsoft.com/en-us/edge/video/security-in-internet-explorer-9-webcast.
  4. Najedź kursorem myszki na klip wideo, w menu na dole odnajdź przycisk < / > (oznaczony czerwonym prostokątem na Rys.4.) i wciśnij go.

Rys. 4 Przycisk umożliwiający osadzenie klipu Edge na stronie.

  1. Skopiuj kod HTML, który został umieszczony w oknie Embed (oznaczony czerwonym prostokątem na Rys. 5.).

Rys. 5. Kod umożliwiający osadzenie klipu TechNet Edge na stronie.

  1. Do strony index.html wklej w nowej linii skopiowany fragment.
  2. Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i sprawdź, czy klip prawidłowo się odtwarza.
  3. Wejdź na stronę https://channel9.msdn.com/Series/Kurs-aplikacji-web-od-podstaw/Zapraszamy-na-darmowy-kurs-aplikacji-web.
  4. Poniżej klipu wideo odnajdź przycisk <> embed (oznaczony czerwonym prostokątem na Rys.6.) i wciśnij go.
  5. W oknie Embed code for this video skopiuj kod odpowiedzialny za osadzenie ramki pływającej na stronie (oznaczony czerwonym prostokątem na Rys.6.).

Rys. 6. Kod, umożliwiający osadzenie klipu Channel 9 na stronie.

Informacja
Zauważ, że mamy możliwość osadzenia tego klipu jako kod HTML (znacznik video), aplikacja Silverlight i ramka pływająca (Iframe).
  1. Do strony index.html wklej w nowej linii skopiowany fragment.
  2. Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i sprawdź, czy klip prawidłowo się odtwarza.

Podsumowanie

W tym samouczku nauczyliśmy się, jak umieścić elementy multimedialne na stronie internetowej za pomocą znacznika embed. Poznaliśmy również metodę osadzania klipu wideo z portali YouTube, Channel 9 i TechNet Edge.

Dodatkowo zobacz: