Wie man den Standard Audio Media Player HTML5 / iPhone tauglich macht

ERROR: Content Element with uid "360" and type "menu" has no rendering definition!

Ausgangslage

Der Standard TYPO3 Audio Player sollte auf HTML5 umgebaut werden, damit MP3 Dateien auch mit Mobile Geräten (konkret iPhone) angeh?rt werden k?nnen. HTML5 <audio> ist zwar eine tolle Sache, aber leider k?nnen dies die meisten bisherigen Browser nicht. Eine TYPO3 Condition f?r Mobile Geräte wäre eine M?glichkeit gewesen, aber wie aus anderen Artikel bereits ersichtlich, bin ich nicht nur aus Performance Gr?nden ein Verfechter davon. Somit musste eine L?sung gefunden werden, welche zwar ein <audio> Element erstellt, jedoch auch ein Fallback f?r die älteren Browser bietet.

L?sung

Eine clevere wie auch einfache L?sung lautet audio.js. In diesem Artikel wird beschreiben wie man diese im TYPO3 einbauen und farblich anpassen kann.

Das Vorgehen ist ziemlich einfach: Audio.js Dateien downloaden, den JavaScript Code im Template einbinden und das media (MP3) Element so ab?dern das ein <audio> HTML Code ausgegeben wird.

PS: Das der Player keine Ogg Vorbis Dateien abspielen kann ist mir egal.

JavaScript im Template einbinden

Wenn mit Templates gearbeitet wird, kann der JavaScript Code direkt im Template eingebunden werden. Wer es lieber per typoscript einbindet, macht es ?ber diese L?sung. Sch?n wäre es, wenn der JavaScript Code nur eingebunden wird, wenn mindestens ein <MP3 Media Element> auf der Seite eingebunden ist. Ist sicherlich machbar, w?rde aber in diesem Artikel zu weit gehen. Daher nur die kurze Version.

Oops, an error occurred! Code: 202011291424596f1066e1Oops, an error occurred! Code: 202011291424592901226f

Media Element f?r MP3 ?dern

Okay, dieser Teil wurde aufwendiger als gedacht. Es geht nicht so einfach per typoscript, ohne das man einiges umbauen m?sste. Somit musste wieder der PHP Code von class.tslib_content_media.php und class.tslib_content_multimedia.php analysiert werden. Wie sich herausgestellt hat, gibt es einen Hook (customMediaRender) damit man seine eigene Media Elemente erstellen kann.

Hm, in Hooks f?r TYPO3 4.5.x einlesen, oder mal im TYPO3 TER schauen ob es bereits etwas f?r HTML5 Audio Elemente gibt.

Die Extension html5media(0.1.0 / Alpha) machte vom Namen her auf den ersten Blick (trotz fehlender Dokumentation) einen guten Eindruck. Jedoch kam diese nach einem kurzen Code Review ( ohne Installation ) f?r mich nicht in Frage. Drei Gr?nde sprachen dagegen.

  1. Will ich keine zusätzliche Extension, welche mir noch eine Content Element mehr macht.
  2. Will ich eine Fallback L?sung und audiojs einbinden k?nnen.
  3. Geht es ganz und gar nicht, das der alternative Content hardcodiert im PHP Code steht und es keine M?glichkeit gibt, diesen ohne die Extension anzupassen zu ?bersteuern.

Hooks im TYPO3 4.5.x. Einige Neuerungen gibt es da ja schon, aber wie baut man sich ein Hook?

Den Media Hook f?r TYPO3 4.5.x erstellen

In Hooks einlesen k?nnt Ihr euch in diesem Artikel nicht! ;-)

In diesem Artikel ist es nur das Ziel, einen HTML5 tauglichen Audio Player f?r das iPhone zu haben. Aus diesem Grund wird als Code Schnipsel nur die absolut einfachste Version gezeigt.

F?r den folgenden Code muss eine eigene Extension vorhanden sein.

Einf?gen des Codes in einer anderen Extension ist auch m?glich...

Oops, an error occurred! Code: 202011291424597d390c41

F?r MP3 Dateien einen Hook im TYPO3 verwenden

Zum Schluss muss an TYPO3 noch mitgeteilt werden, dass es nun f?r MP3 Dateien einen customMediaRender Hook gibt.

Oops, an error occurred! Code: 20201129142459b6586a04

ERROR: Content Element with uid "336" and type "media" has no rendering definition!

Weiterf?hrende Links