Video-Marketing Teil 2: Videos selbst schneiden und im Web veröffentlichen

In diesem Teil stelle ich  zwei Videoschnittprogramme vor und zeige Ihnen, wie Sie Videos im Netz bereitstellen und in Ihren Shop einbinden können.

Inhalts-Übersicht:

1. Videos bearbeiten (Vorstellung Magix Video Deluxe und Windows Movie Maker) und in Webvideos konvertieren
2. So stellen Sie Ihre Videos ins Netz: Flash-Player, Online-Generatoren, HTML5
3. Workaround für XT:Commerce-Shops: FLV-Player und Video in Produktbeschreibung einbinden
4. Material für Ihre Videos: Quellen für lizenzfreies Videofootage

1.1. Windows Movie Maker

Das mit Windows mitgelieferte Windows Movie Maker ist ein einfach zu bedienendes Videoschnittprogramm mit Basisfunktionen für Videoschnitt,  Video-Effekten, Video-Überblendungen und Vertonung.  Allerdings steht nur jeweils eine Spur für Video, Titel und Musik zur Verfügung, was einer der gravierendsten Unterschiede zu kostenpflichtigen Videoschnitt-Programmen ist, wo man durch die Nutzung mehrer Bild- und Video-Elemente gleichzeitig auch komplexere Animationen erstellen kann.

Der Windows Movie Maker ist ein Bestandteil von Windows XP/Vista/7. Um das Tool aufzurufen, geben Sie im Suchenfeld der Startleiste einfach „Movie“ ein, dann sollte es oben unter Programme erscheinen und kann durch einen Klick darauf gestartet werden.

1.2. Magix Video Deluxe

Weitaus umfangreichere Möglichkeiten (wie z.B. Bearbeitung des Materials auf mehreren Video-/Audio-Spuren) und mit  € 69 ein sehr gutes Preis-/Leistungs-Verhältnis bietet das Videoschnitt-Programm Magix Video Deluxe 17 (Link zum Hersteller: https://www.netzreseller.de/go/magix-video). Neben der Möglichkeit, auf bis zu 99 Spuren zu arbeiten,stehen umfangreiche Schnittfunktionen sowie über 1000 Spezialeffekte für Video- und Titel-Animationen zur Verfügung. Eine Besonderheit ist die Möglichkeit des automatischen Videoschnitts, dabei wählt man Stil, Länge und Musik aus und das Programm erstellt automatisch ein auf die Musik geschnittenes Video.

Ein großes Manko bei Magix Video Deluxe ist die fehlende Möglichkeit, die Videos in das FLV-Format (Flashvideo) zu exportieren. Das ist ziemlich unverständlich aufgrund der Tatsache, daß sich dieses Format durch die starke Verbreitung von Flash-Playern und browserseitiger Flash-Unterstüzung  mittlerweile als Standard für Webvideos etabliert hat. Wenn man seine Videos nicht über Portale wie Youtube hochladen und in die Webseite einbinden, sondern lieber über den eigenen Server bereitstellen möchte, sollte man sie auf jeden Fall in FLV umwandeln.

Um ein Video in FLV umzuwandeln, gibt es z.B. diese kostenlosen Tools:

https://www.rivavx.com/
https://any-video-converter.soft-ware.net

Wie und über welche Wege Sie die im FLV-Format abgespeicherten Videos nun online bereitstellen sowie einen Workaround für XT:Commerce-Produktseiten, daß erfahren Sie nachfolgend.

Es gibt mehrere Wege, wie man seine Videos im Netz veröffentlichen kann. Natürlich kann man das Video einfach auf ein Portal wie z.B. Youtube hochladen und es dann über den bereitgestellten Embed-Code in die Seite einbinden (die schnellste Variante, auf die ich im 3. Teil noch näher eingehen werde). Manchmal möchte man aber lieber die Kontrolle über seine Videos behalten und selbst bereitstellen, entweder über den eigenen Webspace oder alternativ einen externen Videohosting-Service-Provider wie z.B. Amazon EZS3 (dazu im nächsten Artikel mehr).

Vorteile einer selbstgehosteten Variante:

  • Die Verbreitung und Kontrolle über das Video bleibt in der eigenen Hand. Das Video kann nicht in fremde Quellen eingebunden werden (außer, man gestattet es)
  • Vollständig an eigenes Design anpassbarer Videoplayer und umfangreiche Möglichkeiten durch Verwendung von zusätzlichen Plugins (je nach Hersteller/Scriptanbieter)
  • Unbegrenzte Länge und Dateigröße der Videos (bei Youtube dürfen Videos maximal 15 Minuten Länge haben)
  • Besucher können nicht durch einen Klick auf das Video die eigene Seite verlassen

Nachteile:

  • Etwas höherer Aufwand (Video selbst umwandeln, Script anpassen und in die Seite einbinden)
  • Für verschiedene Plattformen (Shop, Blog, HTML-Seite) müssen ggfl. verschiedene Plugins /Scripte verwendet werden
  • Man verzichtet ggfl. auf zusätzliche Besucher, die über das Video-Portal auf die Seite kommen
  • Man benötigt ausreichend Speicherplatz und bei stark frequentierten Seiten entsprechend hohe Server-Kapazitäten. Alternativ kann man dafür aber auch auf einen externen Videohosting-Anbieter wie z.B. Amazon EZS3 zurückgreifen, wo man für wenig Geld hohe Speicherkapazitäten und optimale eine Streamingperformance (= Video in Echtzeit ausliefern) erhält

Nachfolgend finden Sie verschiedene Möglichkeiten, Webvideos selbst in die Webseite einzubinden:

Variante 1: Videos per FLV-Player auf Flash-Basis einbinden

Da alle aktuellen Browser Flash standardmäßig unterstützten, hat sich das Einbinden und Abspielen von Videos im Flash-Format FLV (Flash Video) über einen Flashplayer in Webseiten mittlerweile als Standard etabliert. Der durch den Browser als SWF-(Flash-)Objekt aufgerufene Player spielt das Video innerhalb der Webseite in der Regel über das sogenannte Progressive-Download-Verfahren ab  (Daten werden während des Abspielens nachgeladen und können dadurch sofort ohne Wartezeit abgespielt werden). Um die Videos im FLV-Format auf einer Webseite abspielen zu können, benötigt man also eine Shockwave-Flash-(SWF-)-Player-Datei, die oftmals durch ein Javascript per SWFObject separat gesteuert wird und so mehr Einstellungsoptionen für das Video ermöglicht.

Die nachfolgenden Anbieter stellen solche SWF-Player mit Javascript  inkl. der Vorlagen, die man mit wenigen Schritten anpassen kann, zur Verfügung:

Beide Player bieten vorbereitete und einfach anpassbare Scripte zum Einbinden in die Webseite an.  Man lädt die Scripte hoch und muß dann lediglich die entsprechenden eigenen Pfade sowohl zum FLV-Video als auch zum Flashplayer eintragen oder nutzt die Online-Wizards zum Erzeugen des Codes. Das Aussehen des Players lässt sich dabei auch mit verschiedenen Farben und Designs an die eigenen Wünsche anpassen. Es gibt außerdem für viele verschiedene Anwendungsbereiche und Umgebungen Plugins (teilweise kostenpflichtig), wie zum Beispiel:

  • Player in HTML-Seiten oder WordPress-Blogs einzubinden
  • Videos über spezielle Streamingserver auszuliefern
  • Playlisten erstellen und einbinden
  • Videos für Werbe-Netzwerken, z.B. Adsense VideoAds, zu verwenden
  • Eigene Werbetexte über das Video zu legen
  • statistische Daten über Google Analytics zu erfassen
  • Social Media Sharing, wodurch Benutzer die Videos auf Portalen wie Facebook oder Twitter weiter verteilen können
  • Spezialeffekte, wie Darstellung mehrere Videos in einer dreidimensionalen Playliste

Variante 2: Easy Video Player

Der EasyVideoPlayer ist ein sehr umfangreiches Web-Tool für flashbasierte On-the-Fly-Erstellung von Web-Videos. Ein MustHave-Tool für jeden, der als Internet-Marketer Videos für sein Marketing einsetzt. Auch ich nutze das Tool für verschiedene Projekte und möchte nicht mehr darauf verzichten. Man kann die darüber hochgeladenen Videos ohne zusätzliche Plugins/Scripte überall schnell einfügen (Blog, Shop, Webseite, CMS wie Drupal, etc.) und hat im Adminbereich von EVP die volle Kontrolle sowie zahlreiche Einstellungsoptionen für dasVideo. Hat man das Script einmal installiert, kann man unbegrenzt viele Videos hochladen (Begrenzung nur durch die Größe des eigenen Webspace) und umfangreiche Features nutzen wie:

  • Kaufen-Buttons im Video platzieren, wann und wo man möchte
  • Opt-In-Formulare einfügen, um einen Email-Verteiler aufzubauen
  • Anklickbare Overlays, zu definierten Zeitpunkten auf dem Video erscheinen
  • Splittests, um herauszufinden, welches Video am besten konvertiert
  • Komplette Video-Webseite per Knofpdruck erstellen
  • Betrachter nach Ende des Videos automatisch auf eine bestimmte Webseite umleiten (z.B. Warenkorb eines Shops)
  • Umfangreiche Statistikfunktionen
  • Externe Hosting-Dienste wie Amazon S3 können einfach eingebunden werden
  • Videos für öffentlichen Bereich unzugänglich machen (z.B. für Mitgliedersysteme)
  • In der neuen Version 2.1 kann man sogar die Vorteile des Hostings über große Video-Portale Youtube, Vimeo, Google etc. mit den Features von EVP verbinden. Durch die neue Import-Funktion gibt man einfach die URL zu der Video-Quelle (z.B der Youtube-Link) ein und schon kann man das Video mit allen Vorteilen des EVP verbinden und nutzt gleichzeitig die Vorteile von Youtube (zusätzliche Besucher, keine Kosten für Webhosting)

Link zum EasyVideoPlayer: www.easyvideoplayer.com

Übringens bieten wir auch ein All-Inklusive-Paket für EasyVideoPlayer an, da wir eine Developer Lizenz erworben haben. Wenn Sie Interesse an einer eigenen EasyVideoPlayer – Seite inkl. Installation und Einrichtung haben, schreiben Sie mir eine Email an info@digital-products.de.

Variante 3: Einbettungscode für Web-Videos online generieren

Wenn man ein Script nicht selbst händisch anpassen und auf den Webspace hochladen möchte, gibt es auch dafür Online-Tools. Über ein Web-Formular wählt man die Parameter aus, trägt den Pfad zu der Video-Datei ein und erhält dann das Scriptcode zum Einbinden in die Webseite. Nachfolgend stelle ich zwei Online-Dienste vor, die ein Online-Formular zur Erzeugung eines Scriptes zum Einbinden von Webvideos zur Verfügung stellen:

1 .Interlake

Der Videostreaming-Anbieter Interlake bietet unter https://www.interlake.net/pub/videoplayer/index.cfm einen Online-Generator für ein Scriptcode zum Einbetten von Videos in die Webseite an. Der Flash-Player liegt dabei als SWF-Datei auf dem Server von Interlake, sodaß man die Datei nicht extra auf den Webspace hochladen muß.

Unter „Player Layout“ legt man die Paramter fest wie Maße des Videos (Breite/Höhe in Pixel), die Farben des Players und Buttons, ggfl. Pfad zum eigenen Logo und Vorschaubild. Unter „Source“ wählt man „Add your own video ..“ und trägt im Feld „path to video“den Pfad zu dem Video ein. Wenn Ihre Domain meinedomain.de lautet und Ihr Video als Datei „meinvideo.flv“ im Verzeichnis „videos“ liegt, tragen Sie entsprechend https://www.meinedomain.de/videos/meinvideo.flv“ ein. Nach dem Klick auf „Refresh Page“ kann man dann unterhalb des Videos in dem Feld „Copy&Paste Code“ denn Scriptcode kopieren und dort im Quelltext einfügen (HTML-Seite, Blog, Shop, etc.) wo das Video abgespielt werden soll.

2. video for everybody GENERATOR

Auch unter https://sandbox.thewikies.com/vfe-generator gibt es einen Online-Generator, der nach Eingabe des Pfads zum Video und Einstellung der gewünschten Paramter das Script auf Knopfdruck erzeugt.

Das besondere an diesem Online-Tool ist die Möglichkeit, verschiedene Script-Varianten zu erzeugen, man kann Scriptcode für HTML5 (siehe unten), HTML5+Flash oder nur Flash erzeugen lassen.

Man kann wahlweise den Pfad zu erstellten MP4-Videos, OGG (OVG)-Videos (Mozillas Open-Source-Videoformat) oder WebM – Videos (das neue von Google in HTML5 verwendete Webvideoformat) definieren, das Script stellt den Source-Code sowie bei gleichzeitiger Wahl mehrere Formate eine unterhalb des Players angebrachte alternative Auswahlmöglichkeit für den User zur Verfügung. Somit kann man gleich mehrere Fliegen mit einer Klappe schlagen, sehr praktisch für übergreifende Browser-Kompatibilität oder zum Beispiel für Webmaster, deren Zielgruppe auch Nutzer von Mobilgeräten wie z.B. Apple´s Ipad/Iphone sind, die standardmäßig kein Flash unterstützten und somit auch keine flashbasierten Videos abspielen können.

Variante 4: Videos per HTML5 einbinden:

Eine einfache und schnelle Variante ohne Verwendung externer Plugins/Scripte ist die Verwendung des  im HTML5 neu implementierten Video-Tags <video>, das eine browserseitige HTML5-Unterstützung voraussetzt (die bei den aktuellen Browsern allerdings vorhanden ist). Da daß Video hier wie ein HTML-Element behandelt wird, benötigt man kein Flash, der Browser interpretiert sozusagen das Video ähnlich wie ein Image. Das bietet einige Vorteile wie z.B. die Kombination mit CSS / Javascript und die Vermeidung von unerwünschten Effekten wie z.B. Überlagerung des Videos über ein CSS-Menü. Als Videoformat verwendet man standardmäßig ogg (Mozilla/Firefox) oder MP4 (h.264). Ein Problem dabei ist allerdings die Tatsache, daß nicht alle Browser mit diesen Videoformaten auch unbedingt zurecht kommen, da die HTML5-Spezifikation sich bisher auf keinen Open-Source-Codec für das neue Video-Element festlegen konnten. Mehr Informationen zur Einbindung von Video mittels HTML5 gibt es auf https://www.html-seminar.de/html-5-video.htm

Einen speziellen Video-Player für HTML5 gibt es auf https://videojs.com. Unter https://videojs.com/embed-builder gibt es auch einen Online-Generator für HTML5-basierte Videos. Auch der zuvor genannte video for everybody GENERATOR eignet sich sehr gut für die webbasierte Erstellung des benötigten Scriptes.

Damit man in´s FLV-Format umgewandelte Videos auch auf den Produktseiten eines XT:Commerce-Shops abspielen kann, sind einige Anpassungsarbeiten erforderlich, da XT:Commerce von Haus aus keine solche Funktion mitbringt. Daher habe ich nachfolgend einen Workaround erstellt, wie man den Flowplayer in XT:Commerce integriert und ein FLV-Video in die Shop-Produktseite einbindet.

Schritt 1: Laden Sie sich das aktuelle Paket unter www.flowplayer.org runter. Paket entpacken.

Schritt 2: Öffnen Sie ein FTP-Programm wie Filezilla und loggen Sie sich auf dem Webspace Ihres Shops ein. Übertragen Sie die Datei „flowplayer-3.2.6.min.js“ in den Ordner des in Ihrem Shop verwendeten Templates (z.B. meinshop.de/templates/xtc5).

Schritt 3: Übertragen Sie die Dateien „flowplayer.controls-3.2.4.swf“,  „flowplayer-3.2.6.swf“ sowie Ihre Video-Datei in das Hauptverzeichnis auf dem Webspace (oder Unterverzeichnis).

Schritt 4: Laden Sie die Datei header.php aus dem Ordner „includes“ in ein Verzeichnis auf Ihrem PC runter. Öffnen Sie die Datei z.B. mit dem Editor.  Fügen Sie folgende Zeile (unverändert) ein:

<script language=“javascript“ type=“text/javascript“ src=“<?php echo ‚templates/‘.CURRENT_TEMPLATE.’/flowplayer-3.2.6.min.js‘; ?>“>
//–></script>

Schritt 5: Um das Video auf der Produktseite einzufügen, im Artikeleditor in den Quelltextmodus wechseln:

Folgendes einfügen:

<a href=“https://www.IHREDOMAIN.DE/IHRVIDEO.flv“ style=“display: block; width: 520px; height: 330px;“ id=“player“> </a>
<p><script>
flowplayer(„player“, „https://www.IHREDOMAIN.DE/flowplayer-3.2.6.swf“);
</script>

Die rot markierte Stelle ersetzen Sie mit Ihrer ULR und dem Namen Ihre Video-Datei. Wenn Sie noch ein Vorschau-Bild für das Video festlegen möchten, fügen Sie einfach zwischen die <a>-Tags folgenden Code ein: <img height=”HÖHE″ width=”BREITE″ alt=”“ src=”https://www.IHREDOMAIN.DE/IHRBILD” /> Die rot markierten Stellen Höhe und Breite fügen Sie die Pixelgröße des Bildes ein und unter IHREDOMAIN.DE/IHRBILD den Pfad zu der Bilddatei.

Wem das oben gezeigte zu aufwändig ist, kann allerdings auch den o.g. Player Wizard von Interlake benutzen. Der hier bereitgestellte Code kann auch ohne weitere Anpassungsarbeiten im Quelltext-Modus in die Produktseite eingefügt werden.

Wenn man seine Videos aufpeppen möchte, ohne selbst für teueres Geld hochwertiges Material produzieren (lassen) zu müssen, gibt es natürlich auch hierfür entsprechende Online-Anbieter für sogenanntes Footage-Material, das man auch kommerziell für Videoclips einsetzen kann. Durch die Verwendung der hochwertig produzierten Videos und Animationen kann man somit seinen Videos einen professionellen Look verpassen.

Quellen für hochwertiges Video-Footage:

https://footage.shutterstock.com
https://de.fotolia.com

https://www.blueskyfootage.com
(Schwerpunkt auf Natur, Technik und Landschaften)
https://www.digitaljuice.com
(grafisch aufwändig animierte Backgrounds)
https://www.istockphoto.com/video
(große Themenvielfalt)
https://de.clipdealer.com/video
(über 120.000 Clips)
https://www.anistock.com
(Schwerpunkt auf 3D-animierten Hintergründen)
https://www.blatantfx.de
(Geloopte Animationen für Flash und Video)
https://www.revostock.com

Kostenlos:

https://www.movietools.info
https://www.freevideobacks.com

Kommentare

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

  1. Hi,

    I would like to suggest another html5 video player than Flowplayer or JWplayer. THEOplayer is the ONLY html5 video player that can guarantuee http live streaming playback, cross-platform, without any plugins such as Flash or Silverlight. In case you need more information, please visit the website https://www.theoplayer.com for more information.