Schloss auf einem Hügel
Rufposten
 
Text. Bild. Ton.
Diese Seite berichtet von München aus über Multimedia, digitales Storytelling und Kunst im Netz. Und stellt eigene Entwicklungen in diesem Bereich vor.

Rufposten wird betrieben von Matthias Eberl.
Über mich
Kontakt
Kurse



»Put up some data.
Suggest someone else does.
Manage a subject area.
Write some software.
Send us suggestions.
Tell your friends.«
Tim Berners-Lee, der Erfinder des World Wide Web, auf einer der ersten Seiten im WWW.





RSS Feed





Tutorial zu Quicktime, Teil 1:

Quicktime in Webseiten einbinden

Um mehr Ton in Texten zu haben, braucht es nicht unbedingt teure Technologie wie Macromedia Flash. Zwar können Browser von sich aus nur mit wav-Dateien umgehen, aber mit dem Quicktime-Plugin kann man auch MP3-Dateien in Webseiten einbinden. Das Tolle daran: mit einem kleinen Trick kann man es erreichen, dass das File gestreamt wird. Das hat zwei einen Vorteile: Der Anwender braucht das File nicht erst komplett zu laden, bevor er es anhört. Außerdem spart es dem Anbieter auch Bandbreite im Vergleich zur Einbindung mit Flash. Update Januar 2006: Ich habe anhand meiner Logfiles festgestellt, dass der Internet Explorer das File immer komplett lädt. Ich werde demnächst eine Methode mit Flash vorstellen, die dies verhindert.


Brad Sucks - Time to Take Out the Trash (Ausschnitt, 0:30) ©

Der Trick an dieser Stelle ist, das MP3-File nicht direkt in HTML einzubinden, sondern stattdessen ein M3U-File (Playlist-File), das nicht anderes als eine Textdatei ist, die die URL des MP3-Files enthält. In diesem Fall enthält das M3U-File nur eine Zeile:

http://rufposten.de/daten/quicktime_tutorial/Brad_Sucks_-_11_-_Time_To_Take_Out_The_Trash.mp3

Wer es perfekt machen will, verwendet ein aufwendiger gestaltetes Format, um z.B. Interpret und Songtitel anzuzeigen. Es können natürlich auch mehrere Titel hintereinander angegeben werden.

Die Einbindung in den HTML-Code ist etwas kompliziert. Das liegt daran, dass die gängigen Browser immer noch verschiedene Tags für die Einbindung von Multimedia-Objekten benötigen. Opera, Mozilla und Netscape überstützen zwar in ihren neuesten Versionen bereits das W3C-konforme object, aber richtig funktionieren tut das noch nicht. Deswegen sollte man zusätzlich immer auch den alten embed Tag verwenden.

<object
  id="musik_1"
  width="240"
  height="16"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">
    <param name="SRC"
      value="http://rufposten.de/daten/quicktime_tutorial/streaming.m3u">
    <param name="autoplay" value="false">
    <param name="controller" value ="true">
    <param name="type" value="video/quicktime">
    <param name="pluginspage"
      value="http://www.apple.com/quicktime/download/index.html">
  <embed
    name="musik_1"
    width="240"
    height="16"
    src="http://rufposten.de/daten/quicktime_tutorial/streaming.m3u"
    type="video/quicktime"
    autoplay="false"
    controller="true"
    enablejavascript="true"
    pluginspage="http://www.apple.com/quicktime/download/index.html">
    </embed>
</OBJECT>

Dabei wird also der embed-Tag mit dem object-Tag verschachtelt. Ein Nachteil von embed ist allerdings, dass die Seiten dann nicht mehr XHTML-konform sind. Es gibt zwar Tricks, um das zu erreichen, aber das halte ich für Schwachsinn. Solche Verrenkungen bergen mehr Gefahren in sich, als die oben gezeigte, übliche Doppellösung.
Die Parameter müssen jeweils wiederholt werden. Neben den üblichen Angaben zur Höhe haben wir die CLASSID, die Codebase und die Pluginspage. Diese Variablen sollten bei Quicktime immer die gleichen sein. Sie sagen dem Browser, was für ein Plugin das überhaupt ist und wo man es laden kann. Die SRC gibt die URL oder den relativen Pfad der M3U-Datei an. Interessant sind die Parameter "controller" und "autoplay": Je nachdem ob sie "true" oder "false" enthalten, wird die Kontrollanzeige eingeblendet bzw. das Soundfile automatisch gestartet. Bei Apple gibt es eine umfangreiche Liste von weiteren Paramtern. Aber eigentlich muss man dieses Codebeispiel nur kopieren und die SRC-Angabe zweimal ändern.

Schon mit dieser einfachen Technik könnte man in Erzählungen, egal ob in professionellen Medien oder in Weblogs, ganz leicht mehr Ton hineinbekommen. Egal ob Musik, Geräusche oder Sprache. Viel Spaß beim Experimentieren!

Schwein Korsika

Im nächsten Teil des Tutorials zeige ich, wie man Quicktime mit Javascript steuern kann.

Anfrage an Apple-Benutzer: Ich brauche eure Mithilfe. Die Einbindung der M3u-Files funktioniert so noch nicht. Wer weiß Rat? Bei wem funktioniert es? Hilft eine Änderung der Mime-Settings bei Quicktime (siehe Kommentare)? Achtung: Der Quellcode wurde seit der ersten Veröffentlichung mehrmals geändert, um ihn auf allen Browsern lauffähig zu machen!

Veröffentlicht am 17. Aug. 2004. in [/Tech] Kommentare: 41

KerLeone wrote at :

Cool! Und ich Depp habe die Audiofiles immer mit Flash eingebunden, was viel komplizierter ist und auch für alle, die das file nicht hören, Traffic kostet.

Johnny wrote at :

Dein Beispiel geht im Safari am Mac nicht. Und wenn Quicktime am Mac nicht geht, dann hast Du was sehr ernstes verhauen...

majo wrote at :

jedenfalls nicht bei mir (Mac). Der Akzent in der Erklärung liegt - so wie ich sie verstehe - etwas schief: das M3U-File bewirkt keineswegs das "Streamen" von Dateien. MP3s - oder auch jedes andere Quicktime-Medium wie Filme - werden bei richtiger Einbindung - wie von dir gezeigt - und auch Codierung der Quicktime-Files immer "progressiv heruntergeladen", also je nach Schnelligkeit der Verbindung, und fahren beim Erreichen einer bestimmten Menge (ca. 10-15 %) automatisch ab: "pseudostreamen" also. Bei echtem Streaming über den Quicktime Streaming Server kann der Anwender die Datei nicht herunterladen, jedenfalls nicht ohne ein paar Tricks. Das M3U-File dient dabei nach meiner Erinnerung nur dazu, die Reihenfolge der Files bzw. deren Anzahl zu steuern. Wenn du also das M3U-File weglässt und als "src" direkt ein MP3 ansprichst, passiert genau dasselbe, wenn auch nur mit einer Datei. Übrigens geht dasselbe bei Windows Media ganz ähnlich: bei richtiger Einbindung "streamt" die Datei von selbst. Und wer sowas mit Flash macht, gehört echt geprügelt ;-)

Matthias wrote at :

Ich hab es fast befürchtet, dass auf dem Mac mal wieder alles nicht funktioniert. Es ist furchtbar! Vorher habe ich Stunden gebraucht, um die Sache auf Opera zum Laufen zu bekommen! Es ist klar, dass es nur "Pseudostreaming" ist. Aber im Unterschied zur Einbindung einer MP3-Datei (funktioniert das denn eigentlich?) hat die Playlist den Vorteil, dass das File erst geladen wird, wenn der Anwender auf Play klickt. Das spart schonmal 50-80 Prozent der Bandbreite, denn die Hälfte der Besucher einer Seite sind Roboter und ein Großteil der anderen Hälfte interessiert sich nicht für Audio, um es mal pessimistisch auszudrücken. Ich glaube nicht, dass am Konzept etwas falsch ist, eher an der komplizierten Einbindung mit Embed und Object Tags. Oder an den Mime-Einstellungen bei euren Browsern. Quicktime hat sich nämlich bei mir nicht standardmäßig als Plugin für m3u eingestellt. Jetzt brauch ich eure Hilfe. Könnt ihr mal diesen Ratschlag befolgen? Und wenn es dann immer noch nicht geht, vielleicht selber mal an der Embed-Einstellung herumspielen. Funktioniert es denn mit einem eingebetteten MP3-File? Echte Streaming-Server kommen natürlich nicht in Frage. Dass ich das alles mit Quicktime mache, hat einen Grund: ich will es später mit Javascript steuern. Das kann der Mac ja mit Flash auch wieder nicht. Quicktime scripten geht dort aber.

majo wrote at :

eingebetteter File funktioniert sofort:

majo wrote at :

mit Safari gehts jetzt auch:
http://217.160.137.66/test/index.html

Hab den MIME-Type eingeschaltet und einen Fehler in deiner Einbindung gefunden: im EMBED-tag steht type" VALUE="audio/x-mpegurl" es sollte heissen type="audio/quicktime". In Firefox etc. funzt es aber noch nicht.

majo wrote at :

a) größeres Eingabefeld hier b) HTML erlauben ;-)

majo wrote at :

es geht auch mit type="audio/x-mpegurl" bzw. . Der Fehler lag bei type" VALUE="audio/x-mpegurl" im EMBED tag. excerpt:

majo wrote at :

im Mac-IE geht es auch, aber weder in Opera noch in einem Echsen-Browser. Übrigens auch unter Windows nicht. Ergo: die MIME-Settings...

Matthias wrote at :

Nein, bei mir ging es unter Windows auf allen drei gängigen Browsern. Deins geht bei keinem. Ich bin gerade am herumprobieren. Da siest du mal, alles nicht so einfach, deswegen machen es manche dann doch mit Flash.

Matthias wrote at :

Du hast vergessen, den ersten embed Tag wieder zu schließen.

Matthias wrote at :

Jetzt hab ichs. Dein Server liefert das File möglicherweise nicht mit dem richtigen Mime-Typen aus. Jedenfalls funktioniert deine Variante bei mir nur, wenn ich meine Streaming-Datei angebe.http://rufposten.de/daten/test4.html

Matthias wrote at :

Achja, und bei Opera ist der Trick folgender: Die Idioten bei Opera haben eine falsche Anleitung, wie man das Plugin installiert. Man muss aus dem Quicktime-Plugin-Vezeichnis nämlich alle Dateien in das Opera-Plugin-Verzeichnis verschieben und nicht nur die npqtplugin.dll. Eigentlich ist es sowieso eine Schande, dass sich das Plugin nicht von selber dort installiert.

Matthias wrote at :

hey, hey - natürlich ist der embed-tag geschlossen, bei index.html und bei mp3.html auch:
<embed src="http://217.160.137.66/test/woodstockstream.m3u" width="240"
type="audio/audio/x-mpegurl"
height="16" name="musik
1" PLUGINSPAGE="http://www.apple.com/quicktime/download/index.html" autoplay="false" controller="true" enablejavascript="true"> [Hier ich meinen]

Oder wo meinen?

still diggin'...

majo wrote at :

f*ck - jetzt geht HTML wirklich... ;-)

Matthias wrote at :

Es fehlt die eine schließende Klammer nach enablejavascript="true".

Matthias wrote at :

Wegen dem HTML: Das sollte eigentlich nicht sein. Vielleicht habe ich in dem Moment das Script geupdated, als du auf Absenden geklickt hast.

Matthias wrote at :

Mist, irgendwo dudelt hier noch der Stream aber er ist in keinem Fenster mehr zu sehen ;-)

majo wrote at :

Funktioniert denn mein Tutorial jetzt bei Dir? Dein Beispiel läuft bei mir jetzt auf allen Browsern.

Matthias wrote at :

Dieses Kommentar-Script hat auch noch so seine Macken.

majo (wirklich majo!) wrote at :

das kann man so sagen ;-). Erfrischend unvorhersagbar...

Matthias wrote at :

Ist denn das Plugin ordentlich installiert? Im Opera Plugin-Ordner müssen alle Files aus dem Quicktime-Plugin-Ordner sein.

Der Schockwellenreiter wrote at :

"Auf der Seite „Rufposten“ befindet sich Inhalt vom MIME-Typ „audio/x-mpegurl“. Sie haben jedoch kein Plug-In für diesen MIME-Typ installiert."

Matthias wrote at :

Hallo Schockwellenreiter,

majo wrote at :

Entscheidend scheint wirklich der MIME-Type »video/quicktime« zu sein: selbst mit »audio/quicktime« geht es nicht. Ich habe jetzt im OSX die Änderung in den Quicktime-Einstellungen für m3u wieder zurückgenommen: alles steht nun wieder auf den werksmäßigen Standard-Einstellungen, und es funktioniert!

majo wrote at :

P.S.: Safari funzt auch.

Matthias wrote at :

Wunderbar! Marktreife damit erreicht (YEP - FUNZT).

majo wrote at :

bin schon sehr auf den zweiten Teil des Tutorials gespannt. Ich probiere das Ganze mal mit Videos; wir können diesen Trick sehr gut für Medien auf Kunden-Websites brauchen. Abgesehen von der narrativen Komponente - die mindestens ebenso spannend ist - ist diese Methode der Einbindung IMHO die "natürlichste" und für den Anwender einfachste.

Fiete wrote at :

Mac/Firefox – lief alles direkt prima. Schöne Sache, Matthias, wird gleich bei uns verlinkt.

milius wrote at 2006-02-24 16:11:

danke für deinen artikel, war genau was ich brauchte :-)

stefan wrote at 2006-04-06 17:27:

juhu! ein wirklich hilfreicher artikel, dankeschön!

konstantin wrote at 2006-05-11 21:19:

super, wie ist es aber wenn ich die Musik als Endlosschleife brauche ? Als Hintergrundmusik ?Geht so etwas ?

Matthias wrote at 2006-05-12 15:01:

@konstantin, ja das geht auch, dafür musst du beim Einbinden den Loop-Paramter auf "true" setzen. Wie das genau geht, wäre unter der Parameterliste http://www.apple.com/quicktime/tutorials/embed2.html#loop nachzulesen gewesen, die ich im Artikel verlinkt habe, die aber leider veraltet war. Ich habe sie gerade geupdated.

Konstantin wrote at 2006-05-12 20:41:

Vielen Dank, werde ich bei meiner neuen Homepage einsetzen.

mjm wrote at 2006-07-01 14:55:

sehr netter trick. Funktioniert super mit mp3, nur würde genau das selbe mit einem mov brauchen aber das läuft nicht...?

Wolferl wrote at 2006-09-18 14:56:

ich bin leider total schwach auf der brust, was internet-programmierung angeht, aber ich glaube hier kann mir weitergeholfen werden. ich will genau diese player-leiste (über "Brad Sucks - Time to Take Out the Trash (Ausschnitt, 0:30)") unter ein jpg klemmen. ich möchte darüber hinaus 2 oder mehrere tracks abspielen lassen. es sollte möglich sein zwischen den tracks springen zu können. wie kann ich das machen? bei der erklärung bitte berücksichtigen, dass ich ein programmier-anfänger bin.vielen dank!!

jay-p-double-u wrote at 2006-11-16 18:26:

Hey Leute,ich hab folgendes problem.Ich habe eine Flashhompage in der ich verschieden mp3´s zum download anbieten möchte.Das funktioniert auch weitgehend gut.Allerdings werden die mp3´s die eigentlich direkt angesteuert werden,und zum Download bestimmt sind mit dem Quicktime plugIn im Browser geöffnet.Weiß vieleicht jemand wie man das verhindern kann?wenn jemand was weiß bitte schell melden.

David wrote at 2007-01-31 10:29:

...nur zum Thema W3C XHTML 1.0, weil ich mir erlaubt habe auf das entsprechende Logo unten auf dieser Seite zu klicken:"Failed validation, 95 errors"

Matthias wrote at 2007-01-31 16:12:

Danke für den Hinweis. Bis auf etwa sechs Fehler (um die ich mich bei Gelegenheit kümmern werde) ist das auf die Problematik der Objekt-Einbindung in Webseiten zurückzuführen. Der embed-Tag kommt beim W3C gar nicht vor. Dieses Problem kann man als Anwender nicht lösen, hier wären die Plugin- und die Browserentwickler gefragt. Als Anwender kann man höchstens tricksen. Was ich dann aber doch wieder ziemlich albern finde - denn ein Standard ist das dann auch nicht wirklich.

Leider ist es momentan schon schwierig genug Plugin-Scripting auf den wichtigen Browsern überhaupt zum Laufen zu bringen.

Tom wrote at 2008-05-15 12:20:

Hallo, ich möchte eine .mpeg4-Datei (Quicktime) in die Homepage einbinden. Was muß man tun, damit das File gestreamt wird? Danke für jede Antwort im voraus! MfG Tom aus Mainz

Pat Pong wrote at 2010-07-24 01:12:

Hallo.

Wir haben in unsere Website einen Quicktimeplayer eingebaut. Wie kann ich verhindern, das der abspielbare Content herunter geladen werden kann?

Viele Grüße pp




Valid XHTML 1.0  Powered by Blosxom