Die Einbindung von Medieninhalten in eine Typo-3 Seite

Die Einbindung von Mediendateien (Videos, Bilder, MP3-Dateien) gespeichert auf Screencast.com oder auch auf YouTube, gestaltet sich prinzipiell erst mal gleich. Allerdings untersützt die Online-Plattform Screencast.com neben den klassischen Flash-basierten Inhalten nun auch Silverlight-basierte Medieninhalte.

Für den Abruf bieten beide Plattformen prinzipiell die Möglichkeit, sich den zugehörigen notwendigen Quellcode für die Einbettung eines passenden Medienobjektes gleich anzeigen zu lassen und dann per Cut-and-Paste in seine Seiten einzufügen.

Die Bereitstellung einer verschlüsselten Abrufadresse (URL)

Zu jedem Objekt auf dem Mediaserver von Screencast.com wird auch immer ein kodierter Abruf (URL) generiert, der zunächst keine Rückschlüsse auf den eigentlichen Content-Anbieter oder dessen Speicherort (bzw. Anzeigenamen) bietet:

Ein Beispiel für den Aufruf eines "Content-Ordner" konnte so aussehen:

Diese Adresse kann nicht direkt einem realen Benutzer zugeordnet werden.

Ein weiterer großer Vorteil dieses Verfahrens ist, dass falls das Objekt (Ordner oder Mediendatei) auf dem Server verschoben wird, diese Referenz jeweils gleich bleibt.

Natürlich kann diese Link (Verweisattribut <a href=...>) einfach an einen Text (oder ein Bild) gebunden werden:

In dieser Verweisform wird immer eine neue Webseite durch den Browser geöffnet, innerhalb der diese Daten dann angezeigt werden - das ist nicht immer gewünscht !

Einbettung eines Abspielobjektes in die eigene html-Seite

Alternativ wird ebenfalls für eine Mediendatei auch der notwendige html-Code zur Einbettung eines Abspielobjektes in die eigene html-Seite angeboten.

Der dafür notwendige HTML-Code für die jeweilige Art der Mediendatei kann hier einfach per Copy-and-Paste übernommen werden. Verstehen muss man es dafür übrigens nicht ...

  • Für eine Flash-basierte Mediendatei wird in etwa folgender Abruf generiert:
      
    <object id="scPlayer" width="1024" height="768" type="application/x-shockwave-flash" data= ....
    ...src="http://www.screencast.com/users/Kaleck/folders/fhwedel/media/8261d888-6232-4c52-9d6d-368a4af218d5/embed" 
    height="768" width="1024" ></iframe></object>
     
  • Für eine Silverlight-Mediendatei ergibt sich ein etwas anderer Abrufcode:
       
    <div id="silverlightControlHost"> <object data="data:application/
    x-silverlight," type="application/x-silverlight-2" width="1024" height="768"><param name="source" ...
    ...</object> </object> <iframe></iframe></div>
      
 Sollte die native Bildgröße einer gespeicherten Mediendatei (hier 1024x768) zu groß für die Darstellungsfläche innerhalb der Webseite sein, so kann man im Quelltext einfach die Darstellungsgröße des Objektes (an allen Stellen!) verändern. Beachten Sie dabei unbedingt das richtige Höhen-/Seitenveerhältnis ! 



Einfacher wäre es, die Dateien gleich in der richten Größe auch dem Server zu speichern.
Beim Abspielen einer Mediendatei im separten Browserfenster wird darunter ein Statusfenster angezeigt
Einbinden als nativen HTML-Container 
Bei unserem Typo-3 Content Management System funktioniert das Einbinden des Objektes zum Abspielen sehr gut mit einem <HTML-Code> Kontainerobjekt.

  
Wer es möchte, kann die Ausgabefläche mit einem zusätzlichen "<center> ... </center>"-Tag auf der Darstellungsfläche zentrieren.
 
Es ergibt sich so die folgende Darstellung:

          


Das funktioniert natürlich auch mit Live-Präsentationen einer Vorlesung sehr gut.