Logo brainatwork horizontal.png

🎥 Videos auf der Webseite: Tricks, Einstellungen und Nutzen

Die Frage "Wie binde ich ein Video auf meiner Webseite ein?" wird uns immer häufiger gestellt. Mit Hilfe von HTML5 ist es heutzutage kein Problem mehr, Videos lokal auf die Webseite zu integrieren. Alle aktuellen Browser können lokale Videos abspielen. Dazu sind jedoch ein paar Einstellungen notwendig. Lest hier, wie Ihr Videos für Eure Internetseite exportiert und korrekt einbindet. Weiter unten geben wir Euch noch SEO-Tipps, ob sich Videos für Eure Webseite lohnen.

Lokal vs. YouTube: Sollen Videos eher von lokal oder von externen Plattformen eingebunden werden?

Im Vergleich hat in der EU die lokale Einbindung mehr Vorteile als die Einbindung externer Video-Inhalte.
Parallel sollte das Video zusätzlich aber im eigenen YouTube-Channel hochgeladen werden. Folgende Punkte sprechen für eine lokale Einbindung:
  • Das Video und die Videorechte bleiben beim Webseitenbesitzer
  • Datenschutzrechtlich werden keine persönlich sensiblen Daten an externe Plattformen übertragen (siehe Artikel "Fragen zur DSG-VO" Abschnitt "Darf ich YouTube-Videos auf meiner Seite einsetzen?")
  • Das Video kann in allen Ländern der Welt ohne spezielle VPN-Tunnel von den Besuchern angesehen werden
  • Die Video-Integration ist ähnlich einfach, wie z. B. die YouTube-Integration
  • Es wird nach oder im Video keine Werbung und kein Link auf Fremd-Videos von evtl. Mitbewerbern gezeigt.
  • Alle modernen Browser können das Video anzeigen.

Einstellungen: Welche Einstellungen und welches Format müssen lokale HTML-Videos haben?

Folgende Einstellungen und folgender Export können wir bei Adobe Premiere empfehlen:
Formatmp4
CodecH.264*
Export-OptionTwitter 720p
Bitrate1 Mbit/s
AudioAAC
Dateigrößemöglichst klein
Audiospur1e
Untertitelüber separate VTT Dateien
Lizenzgebühren für den Codec H.264 fallen nicht mehr an, sofern das Video kein Bezahlvideo ist, siehe Pressemeldung: https://www.mpegla.com/wp-content/uploads/n-10-08-26.pdf

Wie gut muss die Qualität des Video-Inhalts sein?

Tests zeigen, dass Videos nicht immer professionell erstellt werden müssen. Natürlich benötigt man etwas Equipment, jedoch genügt oft ein Smartphone neuerer Bauart (wie z. B. Samsung Galaxy oder Apple iPhone) zur Video-Aufnahme. In manchen Bereichen kann man auch die inzwischen durchaus günstige GoPro empfehlen. Diese wird bereits zur Produktion von diversen TV-Dokumentation wie z. B. die vom Sender DMAX produzierte Serie "112: Feuerwehr im Einsatz" verwendet.

Dennoch ist Vorsicht geboten! Ein Produkt muss sicherlich professioneller beworben werden, als eine Inhaltsseite. Generell gilt, Eure Qualität sollte sich auch in dem Video widerspiegeln. Es kommt ganz auf Eure Zielgruppe an. YouTuber können sich ausgeflippte und schnell produzierte Videos leisten, da die Zielgruppe meist sehr jung ist und dieses ausgeflippte Format sehr schätzt. Bei Produkten, Dienstleistungen oder Unternehmens-Image-Filmen würde dies häufig eher zu negativen Eindrücken führen.

Integration: Wie integriere ich Videos im HTML-Quellcode?

In HTML5 gibt es dafür den Tag "video". Es genügt inzwischen ein mp4-Video zu hinterlegen, die alternativen Video-Dateien müssen nicht mehr angegeben werden.

Eine detaillierte Anleitung für die manuelle Integration in den HTML-Quellcode findet Ihr auf https://www.w3schools.com/html/html5_video.asp

Achtung: Nicht alle CMS und Editoren erlauben die HTML-Code-Manipulation! Prüft im Frontend unbedingt den Quellcode, ob dieser mit Eurer Eingabe stimmt. Läuft das Video nicht ab, testet es zuerst mit dem Video von w3schools (siehe oberer Link). Läuft das Testvideo einwandfrei, Euer Video jedoch nicht, prüft nochmal die Video-Einstellungen.

bee.tools: Wie integriere ich das Video im CMS bee.tools?

Damit das Video sauber integriert werden kann, muss es als HTML5-Video in der Mediathek hochgeladen werden. Danach gibt es 2 Möglichkeiten das Video schnell in einen Artikel bzw. in einer Seite zu integrieren. Zusätzlich empfehlen wir einen Textlink auf Euren YouTube-Channel zu setzen.

1. Schritt: Upload der Video-Datei in die bee.tools Mediathek

bee.tools Mediathek Upload - Schritt 1
bee.tools Mediathek Upload - Schritt 1
Wechselt dazu in das WEB-Modul "Mediathek". Navigiert im linken Baumbereich in den gewünschten Mediaordner und klickt in der Media-Daten-Auflistung auf die Schaltfläche "HTML5-Video"
bee.tools Mediathek Upload - Schritt 2
bee.tools Mediathek Upload - Schritt 2
Gebt nun eine Bezeichnung mit der Endung ".mp4" ein und klickt auf die Speichern-Schaltfläche.
bee.tools Mediathek Upload - Schritt 3
bee.tools Mediathek Upload - Schritt 3
Wählt nun ein passendes Thumbnail aus und fügt das passende MP4-Video hinzu.
Sind alle geforderten Dateien hochgeladen könnt Ihr auf "Speichern" klicken und das Video wird angezeigt. Ihr könnt hier nun prüfen, ob sich das Video abspielen lässt. Wenn nicht, prüft bitte die Video-Export-Einstellungen.

2. Schritt: Integration in einen Artikel, in eine Seite

beetools Platzhalter html5video Hilfeausschnitt.png
Wechselt nun im Modul WEB-Daten in den gewünschten Artikel. Handelt es sich um einen Artikel mit entsprechender PIM-Eingabe-Maske, prüft ob dort bereits ein Video-Auswahlfeld zur Verfügung steht. Wenn nicht, könnt Ihr es in jedem Textfeld über den bee.tools Platzhalter "html5video" integrieren. Die Media-ID könnt Ihr in der Mediathek auslesen in dem Video-Datensatz auslesen.

Audiospuren: Kann der Standard-HTML-Video-Player mehrere Audiospuren ausgeben?

Nein, dies ist nicht möglich. Wir empfehlen Euch, auch hinsichtlich der Dateigröße, dass Ihr für die aktuelle Sprache das jeweilig passende Video zur Verfügung stellt. Wenn Ihr auf Audiospuren nicht verzichten könnt, müsst Ihr hierfür eigene Video-Player integrieren. Es gibt aktuell Versuche mit JavaScript die Audiodateien entsprechend synchronisiert auszugeben, anscheinend gibt es aber Probleme beim Caching.

Untertitel: Ist es möglich mehrsprachige Untertitel anzugeben?

Auszug Integration WebVTT developer mozilla org.png
Ja, dies ist im HTML-Standard integriert. Ihr müsst im HTML-Tag einen weiteren Unter-HTML-Tag namens Track einbauen. Pro Untertitel muss ein integriert werden. (Siehe https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#HTML_Markup)

Welche Möglichkeiten Ihr noch bei WebVTT habt und wie VTT von den Browsern Chrome, Opera, Firefox, Edge und Safari unterstützt wird, findet Ihr in einer übersichtlichen Tabelle auf der Seite: https://www.webvtt.org/.

Auszug WebVTT Quelle 3playmedia com.png
Einen Artikel wie Ihr die VTT-Files komplett manuell erstellt, findet Ihr hier: https://www.3playmedia.com/2017/06/30/how-to-create-a-webvtt-file/

Solltet Ihr SRT-Dateien in WebVTT konvertieren müssen, hilft das Tool / die Webseite: https://www.webvtt.org/.
Hinweis für das CMS bee.tools: Aktuell ist die VTT-Integration in bee.tools über die Mediathek nicht einfach möglich. Kontaktiert uns bitte bei Bedarf, damit wir Euch das passende Code-Snippet in das CMS bee.tools installieren.

Machen Untertitel im Video Sinn?

Im gewerblichen Bereich: Ja! Ihr könnt dadurch nicht nur mehr Sprachen abdecken, denkt bitte auch daran, dass nicht alle Bürorechner eine Tonausgabe bieten. Gerade für Arbeitsplätze in Großraumbüros sind Tonausgaben oft gesperrt.

SEO: Lohnt sich aus SEO-Sicht der Einbau von Videos auf meiner Webseite?

Ja! Verschiedene Tests haben ergeben, dass Seiten mit Videos besser ranken. Dies liegt vor allem daran, dass ein Video sehr viele Sinne des Menschen aktiviert und Ihr in kurzer Zeit viele Informationen übermitteln könnt. Allerdings kommt es ganz darauf an, was das Video enthält und wo es integriert wird. Ein Werbefilm oder Imagefilm kann bei einem Produkt oder bei einer Dienstleistung durchaus verkaufsfördernd sein. Ist es jedoch ein Werbevideo, wie toll Euer Unternehmen ist, werdet Ihr dadurch allein nicht mehr verkaufen. Allerdings könnt Ihr mit solch einem Video und weiteren entsprechenden Informationen sicherlich das Image Eures Unternehmens präsentieren und neue Mitarbeiter gewinnen.

Damit Ihr Erfolg mit einem Video habt, müsst Ihr Euren Text erweitern. Der Schlüssel zum langfristigen SEO-Erfolg ist Content, Content, Content!

Sollen Videos noch auf YouTube hochgeladen werden?

Ja auf jeden Fall! Erstellt Euren eigenen YouTube-Kanal mit Link auf Eure Webseite und ladet dort Euer Video hoch. Verlinkt Euren YouTube-Kanal von Eurer Webseite aus, am besten über einen Link unterhalb des lokalen Videos. In Fachkreisen spricht man, auf Grund des Volumens der Suchanfragen, immer wieder von der zweitgrößten Suchmaschine "YouTube".

Zusätzlich solltet Ihr Euch auch das Thema YouTube-Werbung näher anschauen. Für den deutschsprachigen Raum sind Werbepreise häufig noch sehr günstig.