Logo brainatwork 25Jahre wLogo brainatwork 25Jahre wLogo brainatwork 25Jahre wLogo brainatwork 25Jahre w
E-Mail

Videos uploaden & bearbeitenModul „media“

Inhalt

Vorbereiten von Videos für Webseiten (Voraussetzungen)

Um Videodateien von Ihrem eigenen Server anzubieten, ist es sinnvoll, diese für eine Verwendung im Web vorzubereiten. Dies bedeutet, dass die Auflösung und die Dateigröße so weit wie möglich zu reduzieren und dennoch eine gewisse Qualität zu liefern. Videos in 4K-Auflösung sind bspw. für das Web unnötig und benötigen zu viel Speicher, der beim Anschauen des Videos übertragen werden muss. 

Voraussetzungen für eine Video-Datei

Format: MP4 (Ihr müsst prüfen, ob das Video sich im Browser abspielen lässt. Am einfachsten nach dem Upload in der Mediathek)
Video-Größe: Dies müsst Ihr selbst berechnen. Schaut Euch dazu mal die Video-Länge + die Dateigröße an. Der Browser lädt das Video in 10-Sekunden-Abschnitten, lädt also die Daten von den kommenden 10 Sekunden herunter. 
Beispiel: Das Video ist 0:20 Minuten lang und hat 400 MB. Dann lädt der Browser für die ersten 10 Sekunden (beim Starten des Videos) zuerst 200 MB und dann erneut 200 MB herunter. In dem Fall ist die Gefahr sehr groß, dass das Video stottert, da 200 MB nur selten unterhalb 1 Sekunde heruntergeladen wird. 

Hier ein Video-Rechner:

Mbit/s DSL-Leitung
Erstladezeit:
* Theoretischer Optimal-Wert bei 100% Download-Leistung.
Aus Nostalgie-Gründen auch noch das gute alte 56k-Modem 😂:
Erstladezeit:

… und jetzt noch die Lieferzeit in Tage der Disketten:
Lieferzeit:
3-5 Tage

Je nach verwendetem Videoprogramm ist das Vorgehen hierzu anders.
In Adobe Premiere können Sie bspw. so vorgehen:
  1. Exportieren Sie Ihr fertiges Video über den Reiter “Exportieren”.
  2. Wählen Sie als Vorgabe “Twitter 1080p Full-HD" oder “Twitter 720p HD”.
  3. Expandieren Sie den Bereich “Video” und klicken Sie anschließend den Button “Mehr”.
  4. Ändern Sie den Wert in “Zielbitrate [MBit/s]” auf “2” (sollte die Videodatei noch zu groß sein, kann man auch bis auf “1” reduzieren).
  5. Klicken Sie zum Abschluss auf “Exportieren”, um Ihr weboptimiertes Video zu erstellen.
Und in DaVinci Resolve funktioniert der Export wie folgt:
  1. Klicken Sie in den Tab “Deliver”.
  2. Wählen Sie im Reiter “Video” aus dem Dropdown “Format” den Wert “MP4”.
  3. Wählen Sie aus dem Dropdown “Resolution” den Wert 1920 x 1080 HD”.
  4. Setzen Sie den Radio-Button im Feld “Quality” auf “Restrict to” und geben Sie den Wert “2000” ein.
  5. Wechseln Sie in den Reiter “Audio” und ändern Sie den Wert im Feld “Track Data Rate” auf “128”.
  6. Fügen Sie Ihr Video mit einem Klick auf “Add to Render Queue” zur Render-Warteschlange hinzu.
  7. Rendern Sie Ihr Video final mit einem Klick auf “Render all” in der Render-Warteschlange.

Upload von Videos

Der einfache Upload

Media Upload Video Einfach
  • Ziehen Sie die mp4-Datei via Drag&Drop in die Media-Upload-Maske und aktivieren Sie den Schalter „MP4-Dateien als HTML5-Video anlegen“ bei den Optionen in der Upload-Maske.
  • Klicken Sie dann auf die „save“-Schaltfläche.
  • Jedes Webseiten-Video (auch HTML5-Video genannt) benötigt ein Vorschaubild – mehr dazu im folgenden Absatz „Vorschaubild hinzufügen + ändern“

Der manuelle Upload

Media Upload Video Manuell
  1. Navigieren Sie zuerst in den gewünschten Mediaordner.
  2. Wählen Sie anschließen über die 3-Punkte „HTML5-Video Upload“.
  3. Vergeben Sie in der nun angezeigten Maske einen Namen mit der Endung „.mp4“ und klicken Sie auf „save“.
  4. Fügen Sie jetzt im Bereich „Video Dateien“ mindestens eine mp4-Video-Datei hinzu. Zusätzlich können Sie weitere Video-Formate wie webm + ogg hinterlegen.

Vorschaubild hinzufügen + ändern

Für gutes Ranking, eine schnell ladende Seite und einer sofortigen Übersicht der Video-Inhalte, wird ein Vorschaubild empfohlen. Ein Video wird auch ohne Vorschaubild im Frontend abgespielt. Im Standard-Video-Player wird in diesem Fall immer der erste Frame angezeigt.
Video Datei Vorschaubild
  1. Wählen Sie die 3 Punkte am Thumbnail der Video-Datei oder führen Sie einen Rechtsklick aus.
  2. Wählen Sie „Bearbeiten des Media-Datensatzes“ aus dem Kontextmenü.
  3. Navigieren Sie zum Bereich „Video Dateien“.
  4. Klicken Sie im Abschnitt „jpg- / png-Thumbnail“ auf den Button „wählen“.
  5. Laden Sie im folgenden Popup Ihr Thumbnail per Drag & Drop hoch.
  6. Alternativ: Können Sie das Vorschaubild auch über die „add“-Schaltfläche hochladen.
Über die „add“-Schaltfläche können Sie alternativ Video oder Bilder austauschen und hinzufügen. Der Upload erkennt automatisch, welches Element ergänzt oder ersetzt werden soll.

SEO-Vorbereitung eines Videos

MP4-Datei in HTML5-Video konvertieren

Für gewöhnlich wandelt bee.tools beim Upload von MP4-Dateien diese automatisch in HTML5-Videos um. Sollten Sie dennoch ein Video in Ihrer Mediathek vorfinden, das noch nicht konvertiert wurde, gehen Sie wie folgt vor:
  1. Aktivieren Sie die Checkbox am Thumbnail, um die Massenbearbeitung zu aktivieren.
  2. Klicken Sie unterhalb der Ordneransicht auf das Dropdown “Aktion”.
  3. Wählen Sie den Punkt “Alle markierten mp4-Dateien als HTML5-Video speichern”.
  4. In der folgenden Maske erhalten Sie eine Übersicht aller Dateien, die in ein HTML5-Video umgewandelt werden.
  5. Klicken Sie den Button “save”.
  6. Fügen Sie anschließend ein passendes Thumbnail zu Ihrem Video hinzu (s. “Upload von Videos”).

Vorschaubild von einem Video erstellen

Der einfachste Weg, ein geeignetes Vorschaubild zu einem Video zu erstellen ist die Screenshot-Funktion:
  1. Spielen Sie das Video im Vollbildmodus auf Ihrem PC/Mac ab, pausieren Sie es an passender Stelle
  2. Verwenden Sie die Screenshot-Funktion Ihres Video-Players, um einen JPG-Screenshot zu erzeugen.
    Alternativ können Sie auch eine Bildschirmkopie durchführen, achten Sie hier jedoch darauf, dass sämtliche Steuerelemente ausgeblendet sind.

Videos mit Untertitel

bee.tools ermöglicht es auch, Untertitel für Ihre Videos anzulegen und zu ändern. Dies hat den großen Vorteil, dass Besucher mit Höreinschränkungen oder Leute, denen es gerade nicht möglich ist, Ton wiederzugeben, die Inhalte Ihrer Videos trotzdem erleben können. Wie dies funktioniert, erfahren Sie in unserem Magazinbeitrag “Videos auf der Webseite: Tricks, Einstellungen und Nutzen”

Video-Sitemap

Weitere Hilfeseiten

Vielen Dank für Ihre Anfrage

wir werden uns in Kürze bei Ihnen melden, um Ihnen ein passendes Angebot zukommen zu lassen.

Angebot anfordern

Schreiben Sie uns eine E-Mail an:
info@baw.gmbh | Angebot anfordern

Oder rufen Sie uns an:
+49 75 61 . 98 51 23

Oder nutzen Sie unser Formular zu Ihrem Angebot:
Mit Stern (*) markierte Felder sind Pflichtfelder!
Die wichtigsten Informationen
Firmendaten
Ansprechpartner
Webseiten-Infos
Bitte verwenden Sie nur JPG oder PDF-Dateien.
Hier können Sie Dateien anfügen, z.B. Strategiepapier, Konzept oder CI-Guide (pdf oder jpg, max. 5 Dateien):
Datenschutz + Absenden

Kostenfreie 20 Minuten Profi-Beratung

wir werden uns in Kürze bei Ihnen melden, um mit Ihnen einen Beratungstermin zu vereinbaren

Kostenfreie 20 Minuten Profi-Beratung anfordern

brainatwork gf thomas fiener
Wie erreichen Sie mehr Online-Sichtbarkeit, mehr Anfragen, mehr Umsatz? Wie erreichen Sie Ihr individuelles Ziel? Nehmen Sie sich ein wenig Zeit – oder gerne auch mehr – für ein unverbindliches Telefonat mit uns. Sie werden in jedem Fall davon profitieren.

Schreiben Sie uns einfach eine E-Mail:
info@baw.gmbh | Beratung anfordern

Oder rufen Sie uns an:
+49 75 61 . 98 51 23

Beratung anfordern:

Ihre Profi-Beratungsanfrage

wir werden uns in Kürze bei Ihnen melden, um mit Ihnen einen Beratungstermin zu vereinbaren

Bevor Sie gehen...

brainatwork gf thomas fiener
Wollen Sie mehr zur Webseiten Erstellung, Webshop Erstellung erfahren? Oder benötigen Sie Hilfe bei der Inhalts-Pflege und Suchmaschinenoptimierung?

Dann rufen Sie uns an:
+49 75 61 . 98 51 23

Oder schreiben eine E-Mail:
info@baw.gmbh

Kostenfreie Beratung:

Vielen Dank

Wir prüfen Ihre Anforderung und werden, sofern die Anforderungen erfüllt sind, unser kostenfreies Magazin zukommen lassen.

brain at work Magazin anfordernKostenfrei via PDF oder Post

baw magazin 02a
In dieser Ausgabe:
❱ Wie Sie mit Online-Analysen neue Absatzpotentiale entdecken
❱ So steigert Google die Maschinenauslastung
❱ Mit individuellem Onlineshop zurück zum Erfolg
❱ Top Service bieten trotz Personalmangel
und noch vieles mehr!

Ihre Kontaktdaten

agentur + cms über unsCMS + Shop bee.tools®