Multimedia

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/multimedia.html
Autor:
Radosław Kowaluk

Grafika i animacja wektorowa (swf)

 

W swoim folderze roboczym utwórz folder obiekty stronę dokument obiekty.html (wykorzystaj plik szablonstrony1.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Obiekty multimedialne</title>
  <meta charset="utf-8"/>
 </head>
 <body>

 </body>
</html>

Definiowanie obiektu1 (typ2, źródło danych3 i rozmiar4) i parametru5 (nazwa6 i wartość7). Parametr nazwy pliku8.

Utwórz lub skopiuj plik film.swf i umieść go w folderze obiekty.

W źródle pliku obiekty.html, w elemencie body dopisz kod.

 <body>
  <object type="application/x-shockwave-flash"
   data="obiekty/film.swf" width="100" height="100">
   <param name="movie" value="obiekty/film.swf">
  </object>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Dopasowanie wielkości  zawartości do wymiarów okna obiektu9.

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="movie" value="obiekty/film.swf">
   <param name="scale" value="showall">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Parametr odtwarzania: menu podręczne10

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="scale" value="showall">
   <param name="menu" value="false">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Parametr odtwarzania: pętla11

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="menu" value="false">
   <param name="loop" value="true">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Parametr odtwarzania: start12

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="loop" value="true">
   <param name="play" value="true">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Jakość obiektu13

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="play" value="true">
   <param name="quality" value="best">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Przezroczystość tła14

W źródle pliku obiekty.html, w elemencie object dopisz kod.

   <param name="quality" value="best">
   <param name="wmode" value="transparent">
  </object>

Zapisz dokument i otwórz go w przeglądarce.

Przetestuj wartości atrybutów (parametrów).

Wgrywanie plików na serwer

Utwórz folder obiekty na serwerze.

Umieść w odpowiednich folderach pliki ćwiczeniowe.

  1. Element <object> - obiekt strony WWW.
  2. Atrybut type - typ obiektu.
  3. Atrybut data - dane obiektu określone w URL.
  4. Atrybuty width i height – szerokość i wysokość obiektu domyślnie w px.
  5. Element <param> - parametr obiektu.
  6. Atrybut name - nazwa parametru.
  7. Atrybut value - wartość parametru.
  8. Parametr movie – definiuje źródło pliku (tak jak atrybut data).
  9. Parametr scale - definiuje skalowanie animacji w oknie obiektu. Przyjmuje wartości: exactfit - dopasowanie poprzez zmianę skali, tak aby całe okno było wypełnione; noborder - przy zachowaniu proporcji ale tak żeby całe okno było wypełnione, najczęściej następuje przycięcie fragmentu prezentacji; showall - dopasowanie do okna przy zachowaniu proporcji prezentacji; noscale - bez skalowania.
  10. Parametr menu - określa czy w przeglądarce po kliknięciu prawym przyciskiem myszki na prezentacji będzie się pokazywało menu podręczne.
  11. Parametr loop – określa sposób odtwarzania animacji (jeśli value jest równe true, prezentacja jest odtwarzana w nieskończoność od początku do końca, chyba że na jej końcu znajduje się akcja stop).
  12. Parametr play - określa sposób odtwarzania animacji (atrybut value może mieć dwie wartości true lub false. Jeśli jest równy false prezentacja zaczyna być odtwarzana dopiero po wybraniu play z menu podręcznego lub naciśnięciu przycisku uruchamiającego, jeśli takowy się w niej znajduje.
  13. Parametr quality - określa jakość prezentacji, (możliwe wartości low - najgorsza, autolow - zaczyna od low i jeśli procesor utrzyma prędkość prezentacji następuje przełączanie do high, autohigh - przeciwnie do autolow, medium - średnia, high - wysoka, best - najlepsza).
  14. Parametr wmode - określa przeźroczystość obiektu. Możliwe wartości to: opaque - nieprzeźroczyste, transparent - przeźroczyste tło.

Typy MIME

Definiowanie grafiki w formacie SVG

Znajdź skopiuj logo W3C w formacie svg. Umieść plik pod nazwą logo.w3c.svg w folderze obiekty.

W źródle pliku obiekty.html, w elemencie body dopisz kod.

  </object>
  <hr/>
  <object type="image/svg+xml"
   data="obiekty/logo.w3c.svg"
   width="100" height="100">
  </object>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

"Strona w stronie"

W źródle pliku obiekty.html, w elemencie body dopisz kod. 

  </object>
  <br/>
  <object data="akapity.html" type="text/html"
   width="800" height="200">
   <a href="akapity.html">akapity</a>
  </object>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Tekst

Utwórz plik w formacie TXT (kodowanie UTF-8). Umieść go w folderze obiekty pod nazwą tekst.txt.

W źródle pliku obiekty.html, w elemencie body dopisz kod. 

  </object>
  <br/>
  <object data="obiekty/tekst.txt" type="text/plain"
   width="800" height="200">
   <a href="obiekty/tekst.txt">tekst</a>
  </object>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Obiekty WMP

Utwórz lunb skopiuj plik w formacie WMV. Umieść go w folderze obiekty pod nazwą film.wmv.

W źródle pliku obiekty.html, w elemencie body dopisz kod.

  </object>
  <br/>
  <object type="video/x-msvideo"
   data="obiekty/film.wmv"
   width="320" height="240" >
   <param name="FileName" value="obiekty/film.wmv"/>
  </object>
 </body>

Zapisz dokument i otwórz go w przeglądarce.

Osadzanie treści. Zezwolenie na pełny ekran1 i sposób komunikacji2

Znajdź w serwisie YouTube film, zapoznaj się z jego kodem osadzania (obiektowym) i skopiuj go.

W źródle pliku obiekty.html, w elemencie body wklej kod.

Uwagi:

<object width="560" height="315">
 <param name="movie" value="https://www.youtube.com/... ">
 </param>
 <param name="allowFullScreen" value="true">
 </param>
 <param name="allowscriptaccess" value="always">
 </param>
 <embed src="https://www.youtube.com/... "
  type="application/x-shockwave-flash"
  width="560" height="315"
  allowscriptaccess="always"
  allowfullscreen="true">
 </embed>
</object>

Zapisz dokument i otwórz go w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze w odpowiednich folderach.

Nowe elementy multimedialne w HTML5 3

  1. Parametr allowFullScreen - określa czy w przeglądarce można użyć trybu pełny ekran.
  2. Parametr AllowScriptAccess - steruje możliwością realizacji żądań z pliku SWF skierowanych do zewnętrznych adresów URL. Wartość "always", plik SWF może komunikować się ze stroną HTML, w której jest osadzony, nawet gdy pochodzi z innej domeny niż ta strona. Wartość "sameDomain", plik SWF może komunikować się ze stroną WWW, w której jest osadzony, tylko wtedy, gdy znajduje się w tej samej domenie, co ta strona. Wartość "never", plik SWF nie może komunikować się z żadnymi stronami HTML.
  3. Elementy: <embed>, <audio>, <video>, <source>, <track>