5.1. fejezet¶

A fejezet anyaga¶

A HTML további lehetőségei¶

Multimédia elemek¶

A HTML5 szabvány alapértelmezés szerint támogatja a multimédiás tartalmak (hangfájlok, videók) beágyazását a weboldalon belül.

Az <audio>...</audio> taggel hangállományokat helyezhetünk el egy weboldalon. A tagnek adható controls attribútummal vezérlőgombokat adhatunk a beágyazott hangfájlnak (pl. elindítás és hangerő szabályozása gombok).

A <source/> páratlan tag segítségével több alternatív hangállományt is megadhatunk. Ezek közül a böngésző a legelső, általa felismerhetőt fogja beágyazni a weboldalra. A tag két fontos attribútuma:

src: a beágyazni kívánt hangfájl elérési útvonala
type: az állomány MIME-típusa.

Hangállományok esetén a type attribútummal megadott MIME-típus az audio/mpeg, audio/ogg vagy audio/wav értékek valamelyike lehet.

Példa: Hangállomány beágyazása egy weboldalra

<h2>A kedvenc zeném</h2>
<audio controls>
  <source src="powerwolf.mp3" type="audio/mpeg"/>
  <source src="greenday.wav" type="audio/wav"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a hangállományok beágyazását.
</audio>

A kód kimenete

A <video>...</video> tag videóállományok beágyazására szolgál. A controls attribútumot itt is használhatjuk vezérlőgombok megjelenítésére. A width és height attribútumokkal megadható a beágyazott videó szélessége és magassága (pixelben).

Több alternatív videóállomány megadására a korábban tárgyalt <source/> taget használjuk. A tag type attribútumával megadható MIME-típus a video/mp4, video/ogg vagy video/webm értékek valamelyike lehet.

Példa: Videóállomány beágyazása egy weboldalra

<h2>A kedvenc videóm</h2>
<video controls width="360">
  <source src="allstar.mp4" type="video/mp4"/>
  <source src="rickroll.ogg" type="video/ogg"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a videóállományok beágyazását.
</video>

A kód kimenete

Canvas¶

A <canvas>...</canvas> tagpár egy téglalap alakú vászon beszúrására szolgál, amelyre JavaScript segítségével rajzokat, animációkat és játékokat készíthetünk. A width és height attribútumokkal szabályozhatjuk a vászon szélességét és magasságát.

Ahhoz, hogy egy vászonra rajzolni tudjunk, szükséges a JavaScript ismerete, ami már túlmutat ennek a kurzusnak a tananyagán (viszont például a Multimédia kurzus tárgyalja a canvas-alapú JavaScriptet).

Példa: Egy egyszerű canvas-es ábra elkészítése

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Canvas példa</title>
    <meta charset="UTF-8"/>
    <style>
     #vaszon { border: 3px solid black; }
    </style>
  </head>
  <body>
    <canvas id="vaszon" width="200" height="200">
      Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a canvas taget.
    </canvas>
    <script>
      // Itt adjuk meg a JavaScript kódot, ami a canvas-re rajzol...
      var ctx = document.getElementById("vaszon").getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(20, 20, 95, 95);
      ctx.fillStyle = "blue";
      ctx.fillRect(50, 50, 95, 95);
      ctx.fillStyle = "green";
      ctx.fillRect(80, 80, 95, 95);
    </script>
  </body>
</html>

A kód kimenete

Utolsó frissítés: 2024-02-10 17:23:02