HTML5 – <audio> Element

Weil Flash von Adobe durch die schnelle Entwicklung über viele Jahre immer mehr Fehler und Sicherheitslücken besaß, wurden Multimedia- und Animationsfunktionen in HTML5, CSS und Javascript integriert. Eines der TML Elemente ist <audio>. Es ermöglicht die Integration von Audioplayern in Webseiten. Damit können Audio Streams oder Sound genutzt werden.

Das HTML <audio> Element hat 7 Attribute

  • src = Der Pfad und Dateiname des Sounds angegeben werden
  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet die Sound Datei nach dem laden der Datei
  • controls = Bei eingetragenen Wert “controls” werden die Steuerelemente angezeigt
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird die Musik endlos wiederholt
  • preload = Wenn “preload” eingetragen wird, dann wird der Sound Datei zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • muted = Schaltet die Wiedergabe auf Lautlos
  • crossorigin = Festlegen, wie das Steuerelement ursprungsfremde Anfragen behandelt

Zudem können die Universalattribute verwendet werden

accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
spellcheck
style
tabindex
title
translate

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;audio&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Klang auf der Webseite</h1>
    <p>Das Sound ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt den &lt;audio&gt; Element nicht.
      </video>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

HTML Canvas Grafiken

HTML Canvas wird zum softwaregesteuerten Zeichnen von Grafiken auf Webseiten eingesetzt.  Das Element <canvas> mit weiteren Parametern zeichnet grafische Figuren, Texte, Hintergründe und kann Bilder hinzufügen. Canvas ist ein Container für Grafiken und Javascript wird zum Zeichnen der Grafiken genutzt.

Welche Browser unterstützen HTML Canvas?

Die volle Unterstützung von Canvas beherrschen die Browser ab der genannten Version und jede neuere Version.

  • Firefox ab Version 2.0
  • Apple Safari ab Version 3.1
  • Chrome ab Version 4.0
  • Opera ab Version 9.0

Ein Code Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML Canvas</title>
</head>
<body>

<!-- Rechteck zeichnen mit Canvas-->
<canvas id="meinCanvas" width="300" height="200" style="border:4px solid #0000cc;">
</canvas>

<!-- Fülling erstellen mit Javascript -->
<script>
var c = document.getElementById("meinCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,260,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"gold");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,280,180);
</script>
</body>
</html>

Fazit

HTML Canvas ist eine praktische Erweiterung, wenn es darum geht maschinell Grafiken zu erstellen. Bei der Digitalisierung und Industrie 4.0 werden Funktionen wie diese die Kommunikation zwischen Mensch und KI erleichtern.

HTML5 – Neuer Tag <video>

Der Element <video> ist neu und dient zum Einbinden von Videoclips oder Streaming Video in Webseiten. Es ist ein Ersatz für die Video Funktion von Flash. Browser mit HTML5 Unterstützung können Videos somit ohne Flash wiedergeben. Das bekannteste Gerät ist das iPad von Apple, das Ostern 2010 in Deutschland auf dem Markt kommt. Weitere Browser, wie Opera V10.51, Apple Safari 4 und Firefox 3.6 und einige Handys unterstützen die Video Funktion von HTML 5.

Das Element <video>hat sieben Attribute:

  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet der Video nachdem die Daten geladen sind.
  • controls = Bei eingetragenen Wert “controls” wird die Steuerung angezeigt.
  • height = Hier wird die Höhe des Videofensters in Pixel angegeben.
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird der Video endlos wiederholt.
  • preload = Wenn “preload” eingetragen wird, dann wird der Video zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • src = Als Wert muss hier der Pfad und Dateiname des Videos angegeben werden.
  • width = Hier wird die Breite des Videofensters in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;video&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Video auf der Webseite integrieren</h1>
    <p>Das Video ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt das &lt;video&gt; Element nicht.
      </video>
  </body>
</html>

Der Element wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

 

 

 

 

HTML5 – Neues Element <embed>

Der <embed> Tag von HTML5 ist vielfältig nutzbar.  Mit Hilfe des Tags werden multimediale Inhalte, Plugins eingebunden. Das bietet die Möglichkeit Flash, Videos und andere multimediale Inhalte in der Webseite zu präsentieren. Über Attribute wird die Breite und die Höhe der genutzten Inhalte festgelegt.

Es können vier Attribute genutzt werden:

  • height = Die Höhe des genutzten Bereichs wird in Pixel angegeben.
  • width = Die Breite des Bereichs in Pixel angeben.
  • src = Den Pfad und Dateiname des eingebundenen Elements eintragen.
  • type = Die Art des genutzten Inhalts bestimmen.

Zudem können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

In den Quellcode Beispiel wird eine lokale Flash Datei in die Webseite eingebunden. Die Breite und Höhe werden durch die Flash Datei gesetzt.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag embed nutzen</title>
  </head>
  <body>
    <h1>Video aus dem Artikel Gimp Bildverbesserung</h1>
    <p>Es wird ein Flash Video eingebunden.</p>

       <embed src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv" />

</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

HTML5 – Neues Element <canvas>

Der Tag <canvas> ist neu und fügt mit Javascript oder Scriptsprachen erstellte Grafiken ein. Dies können zum Beispiel Statistiken, Werbung oder weitere Elemente dargestellt werden. Das ist ein Tag mit viel Potential!

Es gibt zwei Attribute:

  • width = Bei width wird die Breite der grafisch genutzten Fläche in Pixel angegeben werden.
  • height = Hier wird die Höhe der grafisch genutzten Fläche in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag canvas einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun wird ein berechnetes
Quadrat eingebunden.</p>

       <canvas id="quadrat></canvas>

       <!-- Berechnung der Grafik -->
       <script type="text/javascript">
         var ctx=canvas.getContext('2d');
         var canvas=document.getElementById('quadrat');
         ctx.fillStyle='#6666ff';
         ctx.fillRect(10,10,120,120);
       </script>
</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!