Camtasia Studio: Video in WordPress einbinden

Um mit Camtasia Studio erstellte Bildschirmvideos bzw. Screencasts erfolgreich in WordPress einzubinden, benötigt ihr nur ein paar Zeilen html Code. Diesen müsst ihr auch nicht selber schreiben, sondern könnt den von Camtasia Studio erzeugten Code (welcher nach der Videoproduktion in einer html Datei gespeichert wird) verwenden. Das Einzige, was ihr an diesem Code noch anpassen müsst, ist der Pfad zur controller.swf und zur FirstFrame.png. Wenn das geschehen ist, kopiert ihr den angepassten Code in die Zwischenablage und fügt diesen über die html Ansicht an beliebiger Stelle in euren WordPress Artikel ein. Welche Schritte im Einzelnen dafür nötig sind, erfahrt ihr im folgenden Text.

Im Programmfenster von Camtasia Studio klickt ihr auf Produzieren und Weitergeben, daraufhin startet der Produktionsassistent. Hier angekommen wählt ihr im Dropdown Menü den Eintrag Benutzerdefinierte Produktionseinstellungen, klickt auf Weiter und wählt den Eintrag MP4/FLV/SWF – Flash-Ausgabe. Nun klickt ihr auf Weiter und passt, wenn gewünscht, die Video-Einstellungen an. Danach klickt ihr nochmals auf Weiter und setzt einen Haken bei Video in HTML einbetten. Danach geht’s mit einem Klick auf Weiter zum letzten Fenster vor der Konvertierung des Videos, das die Bezeichnung Video produzieren trägt, hier setzt ihr einen Haken bei Produzierte Dateien in Unterordner organisieren und Produktionsergebnisse anzeigen, vergebt einen Produktionsnamen und passt ggf. den Speicherort des Videos an. Habt ihr alle Einstellungen getroffen, klickt ihr zum Abschluss auf Fertig stellen.
Nachdem die Konvertierung des Videos erfolgreich abgeschlossen wurde, öffnet sich erneut ein Fenster mit dem Hinweis Produktion ist abgeschlossen. Hier seht ihr Informationen zu den im Video verwendeten Einstellungen und könnt ein Produktionsprofil speichern. In diesem Fenster klickt ihr auf Produktionsordner öffnen, markiert die html Datei mit einem Rechtsklick und wählt Öffnen mit -> Editor aus. Nachdem der Editor die html Datei geöffnet hat sucht ihr dort nach den Codezeilen die, abgesehen von dem Namen der *.swf Datei, also unbekannt_controller.swf, mit unten zu sehenden Beispiel html Code identisch sein sollten (Abweichende Größeneinstellungen des Videos oder anderer Farbcodes spielen hierbei keine Rolle). Diesen Codeabschnitt kopiert ihr dann in die Zwischenablage und fügt diesen anschließend über die html Ansicht unter WordPress in euren Artikel ein.

Beispiel html Code

<object id="csSWF" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="498" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
                <param name="src" value="unbekannt_controller.swf"/>
                <param name="bgcolor" value="#1a1a1a"/>
                <param name="quality" value="best"/>
                <param name="allowScriptAccess" value="always"/>
                <param name="allowFullScreen" value="true"/>
                <param name="scale" value="showall"/>
                <param name="flashVars" value="autostart=false#&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A"/>
                <embed name="csSWF" src="unbekannt_controller.swf" width="640" height="498" bgcolor="#1a1a1a" quality="best" allowScriptAccess="always" allowFullScreen="true" scale="showall" flashVars="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>

Wenn nicht schon geschehen, kopiert ihr jetzt den kompletten Video-Ordner in das Installationsverzeichnis von WordPress auf den Server eures Hosters und passt anschließend den Pfad zur unbekannt_controller.swf und FirstFrame.png in eurem WordPress Artikel an.

Angepasste Pfadangaben

http://www.euerblog.de/wordpressinstallation/video-ordner/unbenannt_controller.swf<br />

http://www.euerblog.de/wordpressinstallation/video-ordner/FirstFrame.png

Beispiel html Code mit angepassten Pfadangaben

<object id="csSWF" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="498" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
                <param name="src" value="http://www.euerblog.de/wordpressinstallation/video-ordner/unbekannt_controller.swf"/>
                <param name="bgcolor" value="#1a1a1a"/>
                <param name="quality" value="best"/>
                <param name="allowScriptAccess" value="always"/>
                <param name="allowFullScreen" value="true"/>
                <param name="scale" value="showall"/>
                <param name="flashVars" value="autostart=false#&thumb=http://www.euerblog.de/wordpressinstallation/video-ordner/FirstFrame.pngFirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A"/>
                <embed name="csSWF" src="http://www.euerblog.de/wordpressinstallation/video-ordner/unbekannt_controller.swf" width="640" height="498" bgcolor="#1a1a1a" quality="best" allowScriptAccess="always" allowFullScreen="true" scale="showall" flashVars="autostart=false&thumb=http://www.euerblog.de/wordpressinstallation/video-ordner/FirstFrame.pngFirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
            </object>

Klickt jetzt in WordPress auf Speichern und Vorschau, wenn die Pfadangaben richtig waren, sollte sich das Video in eurem Artikel zeigen.

Bildanleitung: Camtasia Studio Video in WordPress einbinden