Suchergebnisse für html5

YouTube Videos als HTML5-Video einbinden

Veröffentlicht am von Pascal
YouTube

Google hat gestern in seinem API-Blog von YouTube erklärt wie man seinen Besuchern mehr Kontrolle darüber geben kann, wie ein Video von YouTube in der Webseite eingebunden wird. Mit einem alternativen Code kann man es seinen Leserinnen und Lesern auch möglich machen, dass sie Videos im WebM-Fomat anschauen ohne auf YouTube selbst zu müssen.

Die Lösung hierfür ist ein simpler iframe. Der Code für das einbinden schaut so aus:

Wobei VIDEO_ID der entsprechenden YouTube-Video-ID entspricht (nach dem http://www.youtube.com/watch?v=HIER die VIDEO-ID)

Der Player schaut dann so aus wie der Player auf YouTube, nämlich so:


Die Vorteile gegenüber des anderen Codes:
- Das Video kann auch im video-Tag von HTML abgespielt werden
- WebM ist ebenfalls möglich (bei beiden wird auf die Einstellungen des Nutzers (youtube.com/html5) zurückgegriffen)
- neues Design
- weniger Code
- iFrame ist W3C-valide
- sollte das Video bspw. wegen Werbung nicht im HTML5-Player zur Verfügung stehen, wird auf Flash zurückgegriffen
- Ist ein Besucher nicht teil der Beta von HTML5, wird automatisch Flash geladen
- mobile Geräte können nun auch auf ihre HTML5-Fähigkeiten zugreifen

Nachteile:
- man kann noch keine andere Farben wählen
- Thumbnail ist gelegentlich verzerrt

Bei neueren Artikeln wird nun der iframe-Code verwendet, der Feed liefert Videos weiterhin im normalen Code aus, da iframes von Google nicht dargestellt werden.

» YouTube API Blog

Google Mail HTML5 Funktionen nun auch im Safari

Veröffentlicht am von Pascal
Google Mail

Vor einiger Zeit hat Google drei HTML5-Funktionen für Google Mail zur Verfügung gestellt, die bisher nur im Firefox und Chrome genutzt werden konnten. Nun hat Google ein Update veröffentlicht, dass die Nutzung auch im Safari 5 möglich macht.

Bei den Features handelt es sich um diese:
Drag&Drop von Datei anhängen. Im Google Chrome und Firefox konnte man bisher einfach Dateien beim Verfassen einer Mail in das Browserfenster ziehen und die Dateien wurden angehängt. Nun funktioniert das auch mit dem Safari 5. Vorteil des Drag und Drops gegen über der Auswahl über den Upload-Dialog: Ein langes Klick durch viele Ordner kann erspart werden, wenn man den betreffenden Ordner eh offen hat. 

Das Einfügen von Bildern ebenfalls per Drag&Drop stand ebenfalls nur im Chrome und Firefox zur Verfügung. Auch hier muss man das Bild einfach in den Browser ziehen und schon fügt Google das Bild in den Text ein. 

Öffnet man einen Chat, die Aufgabenliste oder Verfassen in einem PopUp und schließt den Google Mail-Tab, dann waren die PopUps ebenfalls verschwunden. Seit Anfang Juni "leben" diese aber in Google Chrome weiter und man hat so zum Beispiel seine Aufgabenliste immer im Blick. Nun hat Google diese Funktion auch für Nutzer von Safari 5 nachgerüstet.

HTML5 rocks! – Chromium-Team startet Info-Seite

Veröffentlicht am von Pascal
Chrome

Google hat eine neue Homepage für Interessierte des neuen HTML5-Standards gestartet. Auf HTML5Rocks können Entwickler, Webmaster und deren Kunden sich über Möglichkeiten informieren, die der neue Webstandard mit sich bringt.

HTML5 ist in aller Munde. Nicht zuletzt durch die neuen Funktionen, wie Geotagging, Multimedia und Benachrichtigungen fällt der Standard in das Rampenlicht des Webs.

Deshalb hat das Chromium-Team eine neue Webseite geschaffen, die HTML5 erklärt, die Funktionsweisen beschreibt und Code-Beispiele gibt. Auf HTML5Rocks.com findet man alles, was man wissen muss: Ob News, Beispiele oder Tutorials.

HTML5Rocks
Neben einigen interessanten Fakten und Codestücken kann man im "Playground" auch HTML5 live testen. Dazu nötig ist ein HTML5-fähiger Browser, wie einem bspw. Chrome oder IE mit Chrome Frame nahegelegt wird. Außerdem kann man eigene Tutorials einsenden.

» HTML5Rocks! 

Apple-HTML5-Demo: Nur Safari kann HTML5?

Veröffentlicht am von Pascal
Safari

Der Krieg um die besten Browser geht weiter. Gestern hat Apple eine HTML5-Demo gestartet - die wird allerdings nur von Safari unterstützt - sagt Apple. Jedoch steckt dahinter nichts weiter als ein geschickter Trick, damit andere Browser es nicht abspielen können. Ist also HTML5 wieder mal ein Made-by-Apple-Produkt?

Wer auf Apple.com/HTML5 geht, wird sich sicherlich freuen, endlich mal ein paar Demo's zu sehen. Leider sind diese Demos überhaupt nicht für HTML5 allgemein, sondern für Safari only, wie Fefe heute herausgefunden hat. Auch bei uns zeigt Apple mal wieder Freundlichkeit zur Konkurrenz und sperrt Chrome und Firefox aus.

Nun könnte man ja meinen, dass das vielleicht an irgendwelchen Codecs liegt oder sonst irgendwas, das im Chrome und den anderen Browsern nicht funktioniert. Zuerst einmal: Nein. Ich habe mir die mühe gemacht und den User-Agent von Chrome geändert (geht über die Commandline  --user-agent="Mozilla/5.0 (Windows; U; Windows NT 6.1; de-DE)AppleWebKit/531.22.7 (KHTML, like Gecko) Version/4.0.5Safari/531.22.7") - und siehe da: Alle Demos funktionieren - bis auf die Video-Demo. Natürlich kann man die Demos auch direkt über einen kleinen Umweg und ohne UA-Änderungen aufrufen.

Also habe ich mal bei Felix von Leitner (Fefe) angefragt und wollte wissen, warum denn das so ist. Zunächst ist der MOV-Conatiner ein H.264-Video und ein AAC-(MPEG4)-Audio. Für Chrome kein Problem - geht ja auch bei YouTube. Allerdings ist das Verwirrende bei den Apple-Demos: Es sind ganz einfache Links, die gerade mal um die 400 KB haben:
Wenn du in Chrome auf dem Video bist, rechtsklicke mal draufund sage "Save As". Ich kriege da eine 359-Byte-Datei. Das versucht Chrome abzuspielen und findet keinen Film, weil das eben nur eine Umlenkung ist, und das supported Chrome nicht.

Es gibt keinen Grund, das so zu machen, außer um dafür zu sorgen, dass
nur Quicktime das abspielt.
So hat Apple natürlich ein Argument mehr, damit der User QuickTime und Safari benutzt - schließlich kann nur das Plugin das Video abspielen. Das ist allerdings wieder falsch. Schaut man sich den Link genauer an, dann ist das nur eine Playlist-Datei, die dann am Ende ein Video auf http://movies.apple.com/media/us/html5/.. und so weiter abspielt. Und genau dieses originale Video kann Chrome abspielen, wie Fefe eindrucksvoll in einer Demo belegt.

Apple versucht also andere Browser so hinzustellen, als würden sie unfähig sein, HTML5 auszuführen. Dazu manipuliert man die Videos (was man übrigens auch bei den Produkt-Videos getan hat) und schießt eine Anzeige vor, wenn derjenige nicht Quicktime nutzt. Bei der HTML5-Demo ist das allerdings noch kritischer, denn HTML5 ist ein Standard. In diesem Standard ist festgelegt, wie Methoden funktionieren und wie Browser damit umzugehen haben. Bei der Codec-Diskussion ist aktuell klar (nicht zuletzt durch Lobbyarbeit von Apple), dass H264 sich als Standard etablieren wird bzw. schon ist. Aktuell ist auch noch das Gerede um VP8 (also WebM) von Google. Viele Browser haben den Support schon angekündigt oder implementiert. 

Also ist dieser HTML5-Test nur eine Promotion-Aktion von Apple, denn die wahren Gründe dürften ganz woanders liegen. Offener sind da eher die Tests, die man sonst noch so bei Google findet. Die sind auch von keinem Apple kontrolliert und garantiert auch ohne Quicktime und ohne Safari benutzbar.

Übrigens: Im Praxistest von HTML5Test.com hatte Chrome Stable einen Score von 142, Chromium Dev mit 135, Firefox Stable 101, Internet Explorer Stable 19 und Safari 70. So viel zum Thema HTML5-Kompatibilität.

Vielen Dank Fefe für das Interview ;)

Mit HTML5 und Google Web Toolkit zum Quake II

Veröffentlicht am von Pascal
Code

Klingt etwas komisch, wenn Google am 1. April veröffentlicht, dass es eine Quake-II-Portierung gibt. Wenn es dann noch auf HTML5 ist, könnte man ins Grübeln kommen. Jedoch wurde heute erneut auf das Game hingewiesen, sodass wir uns das etwas genauer angesehen haben.

Mittlerweile ist Quake II schon längst Open Source und viele Entwickler haben sich dran gemacht, Quake II auch auf andere Plattformen zu ziehen. So wurde zum Beispiel eine Java-Portierung, Jake II, vorgenommen. 

Nun gab es aber findige Entwickler, die das ganze auch im Browser spielen wollten. Also machte man sich an vorhandene Technologien und entwickelte mit dem Google Web Toolkit, WebGL, WebSocket und anderen APIs ein Spiel, welches auf HTML5 basiert und tatsächlich funktioniert. Dabei nutzte man die bereits vorhandene Erfahrung und setzte JakeII als Codebasis ein. Die QuakeII-GWT-Portierung ist eher als kleiner Antrieb für andere Spieleentwickler gedacht, ihre Spiele auch mal für den Browser zu portieren. Dazu gehört es natürlich auch, den Quellcode freizugeben, wie es bei Quake II und id Software bereits getan wurde, damit man die Portierung auch durchführen kann - oder eben die Community. Viele (einfache) Spiele könnten damit wieder in Mode kommen und erweitert werden.



Den kompletten Quellcode zum selbst-kompilieren und -ausprobieren gibt es auf Google Code.

Neues YouTube Design nun auch mit HTML5 Player

Veröffentlicht am von Pascal
YouTube

Vor wenigen Tagen hat Google das neue Design für die Videoseite ???für alle Nutzer online gestellt. Seit heute funktioniert auch der HTML5-Player mit dem neuen Design.

YouTube HMTL5
Der HTML5 Player spielt das Video nicht nicht mit dem Flash-Player ab, sondern verwendet den Video-Tag von HTML5. Den HTML5 Player kann man derzeit nur im Google Chrome, Safari sowie im Internet Explorer bei installiertem Chrome Frame Plugin nutzen. Zwar unterstützt auch Opera und der Firefox den Video-Tag, doch beiden fehlt der Video-Codec h.264.

YouTube HTML5 

Google erweitert Funktionen vom HTML5-Player

Veröffentlicht am von Pascal
YouTube

Google hat den HTML5 Player auf YouTube mit neuen Funktionen ausgestattet. Ab sofort soll es möglich sein, Videos im Vollbild anzuschauen, wenn der genutzte Webbrowser dies unterstützt. Außerdem kann man Videos schneller und langsamer abspielen.

Der HTML5-Player wird nun im Google Chrome, Safari und im Internet Explorer unterstützt, wenn man das Chrome Frame Plugin installiert hat, und muss über diese Seite aktiviert werden. Bei unseren Tests konnten wir weder im Safari noch im Google Chrome ein Video im Vollbild abspielen. Hintergrund ist, dass derzeit nur Firefox den Vollbildmodus unterstützt. Der Firefox unterstützt den „h.264 video codec“ nicht und deswegen können Nutzers des Browsers den HTML5-Player nicht nutzen.

Neu ist auch, dass man nun zwischen unterschiedlichen Qualitäten wechseln kann, wenn diese vorhanden sind. Über ein neues Menü neben „Play“ kann man das Video in unterschiedlichen Geschwindigkeiten abspielen. Der Hase macht es schneller, die Schildkröte langsamer.


Wenn ihr das neue YouTube Design nutzt, müsst ihr dieses deaktivieren, um den HTML5-Player zu sehen.

YouTube nun optional mit HTML5

Veröffentlicht am von Pascal
YouTube

Bereits vor einiger Zeit hat Google eine Seite vorgestellt, die zeigt was mit HMTL5 auf Youtube möglich wäre. Nun hat Google den kommenden Standard weiter in die Plattform integriert und bietet es Nutzern von Google Chrome und Safari an anstelle des Flash-Players den Player von HTML5 zu nutzen.

Sowohl Chrome als auch Safari unterstützen schon lange Zeit den HTML5 Video-Tag und das Videoformat h.264. Mit dem Internet Explorer kann man es bei installiertem Chrome Frame-Plugin ebenfalls nutzen. 

Noch gibt es aber einige Beschränkungen und Google greift bei einigen Videos weiterhin auf den Flash Player zurück. Hat ein Video einen Untertitel, Werbung oder Annotations wird dieses im Flash-Player angezeigt. Auch den Vollbildmodus vermisst man bei der HTML5 noch.

Diese Funktionen will man aber in einigen Wochen und Monaten nachrüsten. Der Player wird ist noch nicht Standard sondern wird OptIn. Das Experiment ist mit dem kürzlich vorgestellten Design Feather kompatible. Bei anderen Experimenten kann es noch zu Problemen kommen.

YouTube HTML5 aktivieren

Optisch unterscheidet sich der Player kaum vom Flash Player. Beim Flash-Player hat man den HD bzw. HQ Button entfernt und zeigt die Auflösung in einem Menü dar.

Flash Player:
YouTube Flash Player
HTML5 Player:
YouTube HMTL 5 Player

GWB-Wochenrückblick 40/2023: Das hat sich bei Google alles getan

Veröffentlicht am von Jens
Die Woche 40 neigt sich dem Ende zu und ist mittlerweile beim Sonntag angekommen. Zeit also, auf die vergangenen sieben Tage zurückblicken und wieder unseren kleinen Wochenrückblick zu beginnen. Wie in jeder Woche Woche blicken wir sowohl auf die beliebtesten Artikel der Kalenderwoche 40 vom 1. Oktober bis zum 7. Oktober 2023 als auch auf die gleiche Woche vor fünf Jahren und vor zehn Jahren zurück.

Innovative Ansätze und Trends in der heutigen Webentwicklung

Veröffentlicht am von Jens
Die Webentwicklung hat in den letzten Jahren rasant an Fahrt gewonnen. Mit ständig wachsenden Technologien und Techniken stehen Unternehmen heute vor der Herausforderung, mit den neuesten Trends Schritt zu halten, um wettbewerbsfähig zu bleiben. In diesem Artikel werfen wir einen genauen Blick auf die innovative Landschaft der Webentwicklung und zeigen auf, wie aktuelle Ansätze das Gesicht des Internets verändern.