HTML5-Beispiele

Jedes Beispiel liegt in einem eigenen Ordner und zeigt genau eine Technik.

Video

1. Untertitel Video und Untertitel (Deutsch, Englisch) werden gestreamt.
2. Kapitelnavigation Anklickbare Kapitelliste neben dem Video, das aktuelle Kapitel ist markiert.
3. Posterbild Vorschaubild poster.jpg aus demselben Ordner, das Video lädt erst beim Abspielen.
4. Eigene Controls und Transkript Eigene Bedienelemente statt der Browser-Leiste, dazu ein mitlaufendes, anklickbares Transkript.

Audio

1. Audiodatei einbinden Abspielleiste des Browsers mit Download-Link als Fallback.

Canvas

1. Erste Schritte: Gesicht Kreise, Ellipsen und ein Bogen.
2. Balkendiagramm Diagramm aus einer Liste von Werten, scharf auf hochauflösenden Bildschirmen.
3. 3D-Modell mit WebGL Drehbares Modell aus FreeCAD. Braucht einen Browser mit WebGL.

Hinweise

• Alle Beispiele ausser «Erste Schritte: Gesicht» und «Balkendiagramm» brauchen eine Internetverbindung, weil Video, Musik und die 3D-Bibliothek aus dem Netz geladen werden.
• Alle Beispiele lassen sich per Doppelklick öffnen, ein lokaler Server ist nicht nötig.

Quellen

• «Sintel» © Blender Foundation, CC BY 3.0. Das Posterbild ist ein Standbild aus «Sintel».
• Musik: musicfox, Quelle wie im Audio-Beispiel angegeben.
• 3D-Darstellung: three.js (MIT-Lizenz), Modell aus FreeCAD exportiert.