CSS3 Animation für Webkit-Browser. Thursday, 17.
Feb 2011 Auf tidenhub2011.de habe ich einen kleinen Effekt im Submitbutton eingebaut, in dessen Genuss allerdings nur Benutzer mit einem Webkit-Browser (Chrome, Safari) kommen. Es geht um eine kleine Animation der Hintergrundgrafik. Umgesetzt habe ich das rein mit CSS3 und -webkit-animation. Einfache CSS Animationen kann man auch mit -webkit-transition oder -moz-transition bauen, sobald es aber etwas komplexer wird, reichen die Möglichkeiten nicht mehr aus. Hier eine verkleinerte Version der Hintergrundgrafik zum Verstehen: Und hier der fertige, funktionsfähige Button: Jetzt aber zum Code: Mit @-webkit-keyframes dein_animations_name legt man fest was man animiert und wie der Stand zu welchem Zeitpunkt der Animation ist.
Der ganze Kram bis background interessiert für die Animation nicht. Als nächstes setzen wir mit background-position: 0px 0px; die Hintergrundgrafik auf ihre Ausgangsposition. Richtig interessant wird es erst jetzt. HTML5 video. The HTML5 specification introduced the video element for the purpose of playing videos,[1] partially replacing the object element.
HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. History of <video> element[edit] The <video> element started being discussed by the WHATWG in October 2006.[2] The <video> element was proposed by Opera Software in February 2007.[3] Opera also released a preview build that was showcased the same day,[4][5] and a manifesto that called for video to become a first-class citizen of the web.[6] <video> element examples[edit] The following HTML5 code fragment will embed a WebM video into a web page.
Multiple sources[edit] Supported video and audio formats[edit] with a placeholder:[8] Notes. HTML5 Video. Kaltura: Open Source Video Developer Community. Einführung: Videos einbinden mit HTML 5. Der <video>-Tag ist eine Neuerung von HTML 5 und dient dazu, Filme und Videos abzuspielen.
Videos können — wie Bilder mit dem <img>-Tag — direkt in eine HTML-Seite eingebettet werden. Selbstverständlich können die Videos deshalb auch mit CSS und JavaScript kombiniert werden. Nach den ersten Video-Tag Demos mit HTML 5 wird in diesem Artikel gezeigt, wie man Videos selbst einbaut und den <video>-Tag aus HTML 5 mit aktuellen Browsern bereits einsetzen kann. Keine Plugins, aber unterschiedliche Video-Codecs Zum Abspielen sind mit HTML 5 keine Browser-Plugin wie z.B. Leider wurde bisher kein gemeinsamer Nenner von den Browserherstellern gefunden, welche Video-Codecs eingesetzt werden dürfen/müssen.
Firefox setzt auf Theora Firefox kann Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Safari kann MPEG-4 Safari hingegen setzt auf das MPEG-4-Format mit dem bekannten und effizienten Codec-Duo H.264 (Video) und AAC (Audio). Google Chrome spielt Theora und MPEG-4 Die Basics Ausblick.