Multimedia na stronie

• <img src="adres.jpg" width="200" height="100"> – obrazek.
  <img src="przyklad.jpg" width="200" height="100">
  
  • src - adres pliku graficznego
  • alt - teskt alternatywny (wyświetlany gdy obraz się nie właduje)
  • width, height - szerokość i wysokość obrazu
• <iframe src="adres" width height> – ramka, np. film z YouTube.
  <iframe src="https://youtube.com/embed/..." width="400" height="300"></iframe>
  
  • src - link do zasobu
  • width, height - szerokość i wysokość
  • title - opis zawartości
  • frameborder - czy ma być widoczna ramka (0-nie, 1-tak)
  • allowfullscreen - pozwala na tryb pełno-ekranowy
• <canvas> – powierzchnia do rysowania grafik w JS
  <canvas width="300" height="150"></canvas>
  Sorry, your browser does not support canvas.
• <video> – odtwarzanie filmów. Znacznik służy do osadzania plików wideo (np. MP4, WebM)
  

  <video width="600" controls poster="miniatura.jpg">

  <source src="film.webm" type="video/webm">

  </video>

  Atrybuty znacznika:

  • controls - pokazuje przyciski odtwarzania
  • autoplay - automatyczne odtwarzanie
  • loop - zapętlanie filmu (powtarzanie)
  • muted - start z wyciszonym dźwiękiem
  • poster - miniatura przed odtworzeniem (obrazek)
  • width, height - szerokość i wysokość
• <object data="plik.pdf"> – załączanie innych plików (np. PDF, SVG)
  <object data="plik.pdf" width="400" height="500"></object>
  • data - adres pliku
  • form - definiuje formy należące do obiektu
  • name - określa nazwę obiektu
  • width, height - szerokość i wysokość obiektu
• Mapy zdjęć (image maps): – interaktywne linki na zdjęciu.
  <img src="plan.jpg" usemap="#mapa">
<map name="mapa"> <area shape="rect" coords="34,44,270,350" href="info.html"> </map>
• <audio: > - znacznik do odtwarzanie dźwięku.
  

  Pozwala odtwarzać pliki dźwiękowe (np. MP3, OGG)

  <<audio controls>

  <source src="muzyka".mp3 type="audio/mpeg">

  </audio>>
  

  Atrybuty znacznika:

  • controls - pokazuje przyciski odtwarzania (play,pauza, itd.)
  • autoplay - automaczyczne odtwarzanie po załadowaniu
  • loop - odtwarzanie w pętli
  • muted - wyciszony dźwięk przy starcie
  • preload - ile danych ma być wczytane ("auto", "metadata", "none")
• <SVG: > - znacznik do tworzenia własnych rysnunków na stronie.
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" svg ≷
  

  Atrybuty znacznika:

  • width, height - wysokość i szerokość
  • x - Pozycja "x" lewego górnego rogu prostokąta
  • y - Pozycja "y" lewego górnego rogu prostokąta
  • rx - Promień "x" rogów prostokąta (używany do zaokrąglania narożników). Wartość domyślna to 0
  • ry - Promień y rogów prostokąta (używany do zaokrąglania narożników). Wartość domyślna to 0

  Kształty w SVG:

  • kwadrat <rect>
  • koło <circle>
  • elipsa <ellipse>
  • linia <line>
  • polilinia <polyline>
  • wielokąt <polygon>
  • ścieżka <path>

Atrybuty height i width ustalają rozmiar wyświetlanego obiektu.
Mapą obrazków zarządzasz przez obszary <area ...>.