HTML 5 Video – Agenda – Simples Beispiel

View Github Repository Open presentation in a new window

alxndr13

See all presentation from alxndr13

HTML 5 Video – Agenda – Simples Beispiel

0 0

HTML5-Video-Presentation

Präsentation

On Github alxndr13 / HTML5-Video-Presentation

HTML 5 Video

Eine Präsentation von Alexander Huck

Agenda

Agenda

  • Warum HTML5 Video?
  • Simples Beispiel
  • Möglichkeiten mit CSS und JavaScript
  • erweitertes Beispiel

Warum HTML5 Video?

  • Flash veraltet und fehleranfällig
  • Sicherheitsrisiko
  • bei HTML5 keine Installationen oder Plugins notwendig
  • Mobile Endgeräte spielen nur HTML5 Video ab.

Warum HTML5 Video?

“New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” Steve Jobs April, 2010

Simples Beispiel

Ihr Browser unterstützt HTML5-Video leider noch nicht. :-(

Möglichkeiten mit CSS und JavaScript

Mithilfe von CSS und JavaScript ist es möglich eigene Controls für das Video Element zu bauen und damit eigene angepasste Player. (wie z.B. Youtube) Das Video-Element von HTML5 liefert einige Methoden und Eigenschaften mit, aus denen sich eigene Controls bauen lassen. Im folgenden Beispiel wurden alle Controls und deren Funktionalität aus dem Simplen Beispiel nachgebaut. Die Buttons sind mithilfe von Bootstrap.js customized.

Erweitertes Beispiel

Ihr Browser unterstützt HTML5-Video leider noch nicht. :-(
► Mute Full-Screen
HTML 5 Video Eine Präsentation von Alexander Huck