Ein Video ist schnell gedreht – heutzutage – mit dem Smartphone zum Beispiel. Und das Schneiden ist auch nicht mehr so kompliziert. Also, ich spreche jetzt von „Videoschnappschüssen“. Profi-Videos für Imagezwecke usw machen noch immer besser die Profis.. Egal, ob ein schneller Video-Eindruck oder ein fein produziertes Image-Video, es wäre schön, wenn sich diese Videos schnell und unkompliziert einbetten ließen. Auf Whatsapp kann ich es ja auch ganz einfach uploaden und mit Friends & Family teilen..

Aber die Browser können sich nicht einigen auf eine gemeinsame Video-Sprache. Noch nicht. Der eine spricht WebMisch, der andere versteht fast nur OGV.. Und ich hatte gedacht, alle könne MP4.. Und der richtige Codex soll es auch sein.

Damit die verschiedenen Browser unser Video gut wiedergeben können, müssen wir mindestens in drei Formate konvertieren und uploaden: MP4, WEBM und OGV.  (Alternativ nur 2 – da könnte man wählen zwichen WEBM und OGV zusätzlich zu MP4. Dabei schneidet WEBM besser ab – bessere Qualität und kompatibel mit mehreren Browsern. OGG hingegen „kann“ auch ältere Browser..). Die Webseite muss so programmiert sein, dass erkannt wird welcher Browser zugreift, dann das richtige Videoformat automatisch gewählt und abgespielt wird (fallback).

MP4 ist am besten geeignet für mobile Browser (iOS – wie für iPhone, iPod, iPad… und die meisten Android Geräte und moderne Blackberries). Safari, Chrome, IE 9+. Codec: H264.

WEBM: Chrome, Firefox, Opera. VP8 or VP9 video codec und Vorbis oder Opus audio codec.

OGV (OGG Theora Vorbis): Chrome, Firefox, Opera. Codec: Theora OGG

Eine optimale Auflösung für verschiedenste Endgeräte ist dabei 848×480.

Ich habe mir zum einfachen Videoschnitt und Videokonvertierung folgende Programme geladen:

Movie Maker von Microsoft Windows: für Videoschnitte, Effekte und Bildtitel. Speichern als MP4 in verschiedensten Größen.

Free WebM Video Converter von dvdvideosoft.com (beim Installieren aufpassen auf alle anderen Programme, die mit installiert werden, wenn man sie nicht wegklickt..): Hier kann ich Videoformate umkonvertieren, z.B. mein MP4 in MWEB.

Der Beitrag Videos einbetten erschien zuerst auf sisonke webdesign.

Dazu gibt es eine einfache Lösung:

1. Auf Youtube den Einbettungscode holen (unter dem Video „Teilen / Einbetten“ wählen – bei „Mehr anzeigen“ gibt es mehr Details, wie Größe, etc. )

<iframe width="560" height="315" src="https://www.youtube.com/embed/lB9JY52Ymfc?rel=0" frameborder="0" allowfullscreen>

Der Teil „?rel=0“ am ende des Embed-Codes ist nicht automatisch hinzugefügt, sondern bedeutet, dass am Ende des Videos keine vorgeschlagenen Videos angezeigt werden.

2. Start- und Endzeit anlegen

Die Zeit wird in Sekunden gemessen. Der Code für den Start lautet „&start=“ und für die Endzeit „&end=„. D.h. diese Code-Snippets muss ich dem Einbettungscode hinzufügen, damit das Video an der von mir bestimmten Stelle beginnt und auch dort aufhört, wo ich es möchte.

Angenommen, ich möchte, dass das Video bei Sekunde 20 anfängt und bei Sekunde 50 aufhört! Dann muss ich den o.a. Einbettungscode wie folgt verändern:

<iframe width="560" height="315" src="https://www.youtube.com/embed/N7Q8zena9nY?rel=0&start=20&end=50" frameborder="0" allowfullscreen>

Der Beitrag Youtube Video mit Startzeit einbetten erschien zuerst auf sisonke webdesign.

Was aber, wenn man ein Video in seine Webseite einbaut und dieses Video soll immer loopen – und nicht auf Klick pausieren. Diese Funktion des „permanenten Loops“ gibt es übrigens auch bei Video-Backgrounds.

Ohne jetzt groß in irgendwelche Javascripts eingreifen zu müssen, gibt es hierzu einen simplen Trick! Einfach über das Video ein durchsichtiges Bild legen! Eine PNG Datei in genau derselben Größe wie das Video anlegen und diese als Layer über das Video legen. Auf diese durchsichtige Bilddatei kann ich natürlich die gewünschten Links setzen – wie z.B. scroll down. Aber das lästige Pausieren des Videos bei Klick ist damit erledigt.

Hoffe, das hilft jemanden! selbst habe ich den Trick in einem Forum gefunden und er hat mir sehr geholfen…

Der Beitrag Video Pause und Play Funktion auf Klick erschien zuerst auf sisonke webdesign.