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 2:

Quicktime mit Javascript steuern

Geräusche und Filme sind sequentielle Medien. Wenn wir mehr als ein Element auf einer Website unterbringen wollen, müssen wir diese irgendwie steuern. Normalerweise geschieht das durch den Anwendet, der z.B. in der Quicktime-Steuerleiste auf Play klickt. Per Javascript kann die Steuerung aber auch über Links, Buttons oder beliebige Grafiken erfolgen. Und schließlich kann man das Starten und Stoppen auch an andere Ereignisse binden, so wie etwa in meiner Multimedia-Entwicklung, in der die Audioelemente nach der Position des Lesers im Text, bzw. des Scrollbalkens, gestartet und gestoppt werden. Hier sollen aber nur die Grundlagen der Technik erklärt werden.

Dazu binden wir einfach wieder ein Quicktime-Element in den HTML-Code ein, wie im letzten Tutorial erklärt. Wichtig ist diesmal die Bezeichnung, die wir dem Objekt mit den entsprechenden HTML-Attributen geben. Dabei müssen wir ein wenig tricksen und dem object-Tag eine Id geben, dem Element-Tag dagegen einen name. Nur dann können wir das Element später in allen Browsern als Element "musik2" ansprechen. Keine Unterstriche verwenden, sonst funktioniert es nicht.
Dieses Element des Dokuments können wir nun mit der Javascript-Methode document.musik2 ansprechen. Dann hängen wir den Befehl zum Abspielen an und verpacken das Ganze in einen Link:

<a href="javascript:document.musik2.Play();">Abspielen</a>


Abspielen
(Jag - Tumbleweed. Ausschnitt, 0:33) ©)

Neben dem abspielen können wir alles mögliche mit diesem Objekt anstellen. Apple bietet uns dazu eine jämmerliche Dokumentation aus dem Jahre 2000 an; in den aktuellen Seiten konnte ich nichts dazu finden. Wir können den lieben Jag mit seiner Bluesgitarre nun stoppen, zurückspulen, die Lautstärke auf 100 oder 200 oder was auch immer setzen (zwischen 0 und 255). Man kann auch zu einer bestimmten Position springen, aber die Dokumentation und überhaupt das ganze Internet schweigt sich dazu aus, wie sich diese Position berechnet. Obiges Beispiel springt zu Position 8000, das Ende der 33 Sekunden Musik liegt bei 20124. Vielleicht kann es jemand ausknobeln, wie sich das berechnet (Zehntelsekunden ?), vielleicht ist es aber auch einfacher, den Schiebregler zu bewegen und die Position dann auszulesen. Außerdem können wir den Kontrollregler aus - und anschalten. Das sollte man aber von vornherein schon bei der Einbettung des Objektes bestimmen. Man hat außerdem eine Menge weiterer Methoden, einer der interessantesten ist dabei noch GetMaxTimeLoaded(), die einem die aktuelle Ladezeit übergibt. Damit könnte man sich mit CSS eine schöne Ladeanzeige basteln, falls man ein MP3-File direkt einbindet.

Aber allein mit der Start- und Stoppfunktion kann man in Verbindung mit Javascript eine Menge spannender Sachen realisieren.


Mit der Maus über das Bild fahren und ein Interview-Ausschnitt (Deutschlandradio) sollte zu hören sein. Dafür wurde der Start- und Stopp-Befehl einfach an einen onMouseover und onMouseout des Bildes geknüpft. Mit dieser Technik könnte man eine schöne Bildreportage erstellen, da es für den Hörer sehr angenehm ist, zuzuhören, während die Augen über ein Bild streifen können. Ich hatte hier bereits eine ähnliche Reportage vorgestellt, in der eine Kunstexpertin Skulpturen bespricht.

Auch ohne Flash kann man also bereits sehr viele interaktive Dinge mit Audio- und Videodateien produzieren. Aber auch hier ist die technische Machbarkeit die eine Seite. Es braucht nun Journalisten oder experimentierfreudige Weblogger, die diese Technik für neue narrative Formen verwenden, die für den Leser wirklich einen Mehrwert darstellen.

In ein bis zwei Wochen werde ich hier im nächsten Tutorial verschiedene Möglichkeiten vorstellen, ohne Flash eine vertonte Diashow im Stil der New York Times Audio Slideshows zu erstellen. Am vielversprechendsten ist dabei die W3C-Multimedia-Sprache SMIL.

Veröffentlicht am 24. Aug. 2004. in [/Tech] Kommentare: 14

Malte Diedrich wrote at :

Wär' schön, geht leider im Safari nicht :( Irgendwelche Ideen?

Matthias wrote at :

Ok, das war ja irgendwie klar. Also, Stück für Stück: Was geht denn nicht? Startet nicht? Oder erscheint der Balken nicht? Startet es bei einem Klick auf den Play-Button von Quicktime?

majo wrote at :

mein Trost an Dich: es funktioniert mit Firefox und Camino, auf dem Mac. Bei Safari werden die QT-Elemente angezeigt, aber die Scripts scheinen nicht zu funktionieren.

Matthias wrote at :

Ja, da wird man wohl nichts machen können, dann. Safari hat das Scripting anscheinend nicht implementiert, ich habe entsprechende Meldungen gefunden, z.B. hier:

majo wrote at :

... diese ganze Scripting Sache heutzutage nicht sehr populär ist

majo wrote at :

du hast überall, wo die Quicktime-Download-Seite aufgerufen wird, ein t zuviel: http://www.apple.com/quicktime/download/indext.html

Matthias wrote at :

War mir auch schon aufgefallen, die URL ist auch von irgendeiner älteren Seite übernommen. Aber, auch das ist nun korrigiert.

Sascha wrote at :

Also bei mir mit Firefox und XP klappt das abspielen durch Mousover nicht.

Matthias wrote at :

@Sascha: Klappt denn das Starten per Link?

Matthias wrote at :

@Sascha: Ok, das Problem hätten wir auch gelöst. Wie bei Opera liegt das an einem schlecht installiertem Quicktime-Plugin. Entweder die Quicktime-Installation erneut ausführen (nicht getestet), oder einfacher: alle Files aus dem Quicktime/Plugin-Verzeichnis in das Firefox/Plugin-Verzeichnis kopieren.

Timi-loader wrote at 2006-02-19 12:33:

hallo also 1. hab ich noch ne neuere definition der javascriptsteuerung gefunden: http://developer.apple.com/documentation/QuickTime/Conceptual/QTScriptingJavaScript/bQTScriptingJavaScriDocument/chapter1000section5.html#//apple_ref/doc/uid/TP40001526-CH001-QuickTimeJavaScriptReference und 2. bekomme ich das mit dem trackname nicht hin.. also ich will, wenn grad ne laylist gespielt wird den aktuellen titelnamen angezeigt bekommen.. irgendwie funzt das net.. ich habs mit ner pls-playlist versucht weil man dort einfach File1 und Title1 dazu angeben kann mfg TLP

Peter Sabitzer wrote at 2007-02-16 22:26:

Hallo,

Ich habe gerade nachgespielt, wie man an eine bestimmte Position im MP3 springt, vielleicht ist dir diese Info noch nützlich:

MP3 Objektname sei AudioData... Mit der Methode AudioData.GetTimeScale() liest du aus wieviele Frames (Takte/Signale) pro Sekunde gespielt werden, das hängt von der Kodierung im MP3 ab.

SetTime() kennst du ja bereits, die Methode springt zu einem bestimmten Frame.

Um nun an eine bestimmte Stelle zu springen, nimm (ZeitinSekunden * GetTimeScale()), funktioniert wunderbar!

Die Doku bei Apple.com hab ich nicht so schlecht gefunden, neuere Version? http://developer.apple.com/documentation/QuickTime/Conceptual/QTScriptingJavaScript/bQTScriptingJavaScriDocument/chapter1000section5.html

cu, Petrus

Jochen wrote at 2007-03-25 15:36:

@Malte, Matthias hier geht das sehr wohl mit dem Safari.

Ferdi Fuchs wrote at 2008-08-28 16:42:

Geht super mit dem Safari




Valid XHTML 1.0  Powered by Blosxom