Twoday-Tipp #8 - Videos anzeigen

Wichtiger Hinweis

Die in diesem Beitrag beschriebene Erstversion des Videoload-Scripts ist veraltet. Bitte nutzen Sie die neue Version #2, die hier dokumentiert ist.

video2day.jpg

Datum Änderungen / Edits
08.06.2016 Neue Parameter zur Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos: start und endat
07.02.2016 Audioplattform soundcloud.com neu aufgenommen (Dokumentation siehe Kapitel Videos im Blogbeitrag anzeigen).
15.01.2016 Videoanbieter putpat.tv wurde entfernt (Übernahme durch ampya.com, die keine Einbettungen mehr ermöglichen), Plattform jsfiddle.net zur Anzeige von HTML/CSS/JS-Lösungen neu aufgenommen.
28.10.2015 Videoanbieter blip.tv wurde entfernt (Übernahme durch maker.tv), GIF-Plattform giphy.com neu aufgenommen.
03.03.2015 Plattform vube.com wurde entfernt (Webseite ist inaktiv), Plattform funnyordie.com neu aufgenommen.

Eine der ältesten, am häufigsten nachgefragten und trotzdem stoisch ignorierten Twoday-Nutzer­anforderungen ist die der simplen Anzeige von Videos. Seit die großen Videoplattformen den historischen, in Twoday noch erlaubten Einbettungscode mittels <object> und <embed> zugunsten des moderneren <iframe>-Befehls aufgegeben haben, fühlt sich das Thema Videoeinbindung bei Twoday so an, wie wenn man im Casino zu spät seine Chips auf den Tisch schiebt: "Rien ne va plus!".

Der Grund: Twoday lässt iframe-Befehle in Beitragstexten aus Sicherheits­erwägungen grund­sätzlich nicht zu, filtert diese automatisch aus und lässt dem Nutzer nur die Möglichkeit eines drögen YouTube- oder Vimeo-Textlinks. Unnötig langweilig. Und inkonsequent. Und Zeit, dies zu ändern!

Selbstverständlich hat Twoday ein berechtigtes Sicherheitsinteresse, das es zu respektieren gilt, jedoch gibt es unzweifelhaft gute und sicherheitskonforme Lösungen, zu denen es auch schon vor über 2 Jahren Vorschläge gab. Passiert ist seitdem, wie so oft, nichts.

Die nachstehend beschriebene Open-Source-Lösung ermöglicht Ihnen die einfache und schnelle Videoeinbindung von derzeit 12 verschiedenen Videoplattformen sowie die Anzeige beliebiger MP4-Videodateien.

Das Video-Script einmalig installieren

Nur ein Script — und alles wird gut

Um ab sofort in Ihrem Blog Videos aller großen Plattformen oder auch eigene MP4-Videodateien anzeigen zu können, benötigen Sie nur ein Script, das Sie einmalig im Skin Site.page einbinden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeile hinein:
    	<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld oben und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster und kopieren Sie ihn in die Zwischen­ablage. Falls bei Ihnen der Link copy angezeigt wird (Rechner mit Adobe Flash-Installation), können Sie darauf klicken, um den Text ohne Pop-Up-Fenster sofort in die Zwischen­ablage zu kopieren. Gehen Sie nun in Ihren Skin Site.page und kopieren dort aus der Zwischenablage an die richtige Stelle vor </body>.Ihr Skin Site.page müsste nun in etwa so aussehen:

    video1.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Beiträgen Videos einbinden und anzeigen.
Das Script ist so geschrieben, dass es die Videofunktion nur dann lädt, wenn auf der aktuell anzuzeigenden Seite tatsächlich ein Videobefehl gefunden wird. Es gibt also keine Verzögerung bei den Ladezeiten für Seiten ohne Videos.

Videos im Beitragstext einbinden

Videos im Blogbeitrag anzeigen

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div>

An der feststehenden Zeichenkette html5video erkennt das eingebundene Script, dass hier ein Video angezeigt werden soll. Die darauf folgende Kennung beschreibt die Plattform, von der das Video stammt. Derzeit kann das Script Videos von folgenden Anbietern generieren:

KennungVideoanbieter
youtubewww.youtube.com
vimeowww.vimeo.com
vevowww.vevo.com
giphywww.giphy.com
dailymotionwww.dailymotion.com
jsfiddlewww.jsfiddle.net
soundcloudwww.soundcloud.com
funnyordiewww.funnyordie.com
liveleakwww.liveleak.com
vinewww.vine.co
metacafewww.metacafe.com
myvideowww.myvideo.de
othereigene URL eines MP4-Videos

Im DIV-Parameter id wird die ID des jeweiligen Videos vermerkt. Diese Video-ID findet sich meist recht einfach im iframe-Befehl des Videos (Einbettungs­code des Videoanbieters) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. Weiter unten stelle ich ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-HTML-Befehl gebrauchsfertig zusammenstellt.

Ergänzende Videoparameter

Breite

Im oben gezeigten DIV-Befehl nimmt das Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe machen. Der Befehl für das obige Video in einer Breite von 350 Pixeln lautet dann:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div>

Seitenverhältnis

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,7778. Manche Videos haben noch ein 4:3 Verhältnis (1,3333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Putpat-Video mit einem Seitenverhältnis von 2,4 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video putpat ratio-2.4 width-400" id="3qs5vhn"></div>

Eigene MP4-Videodateien

Sie können auch eigene MP4-Videodateien in einem Videoplayer anzeigen lassen. Diese müssen eine öffentlich erreichbare URL besitzen, also z.B. bei einem Cloudspeicheranbieter wie Dropbox, GoogleDrive oder auf eigenem Webspace liegen. Für die Anzeige wird der bekannte Open Source HTML5 Videoplayer VideoJS verwendet. Die Adresse/URL des Videos wird im Parameter id übergeben. Der Befehl für die Einbindung eines eigenen MP4-Videos hat dann folgendes Format:

<div class="html5video other ratio-2.4" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Posterbild für eigene MP4-Videodateien

Über einen weiteren Parameter weisen Sie die Videofunktion an, ein Posterbild im Videobereich anzuzeigen, solange das Video noch nicht vom Anwender gestartet wurde. Das Posterbild ist ein "Standbild" in einem beliebigen Bildformat (z.B. jpg, png, gif, bmp) und muss sich an gleichem Ort wie das MP4-Video befinden.

Wenn ein MP4-Video im Pfad http://www.meinewebadresse.de/videos/meinvideo.mp4 zu finden ist, muss ein zugehöriges jpg-Standbild die Adresse http://www.meinewebadresse.de/videos/meinvideo.jpg besitzen. Für die Anzeige eines Standbilds ergänzen Sie einfach poster als zusätzlichen Übergabewert. Ist das Standbild nicht vom Typ jpg, so definieren Sie je nach Dateityp ergänzend ein image-png, image-gif oder image-bmp.

Beispiel: Für ein MP4-Video in 500 Pixel Breite, einem Seitenverhältnis von 2,4 und einem gif-Standbild lautete der DIV-Befehl dann so:

<div class="html5video other width-500 ratio-2.4 poster image-gif" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Der poster-Parameter funktioniert nur bei MP4-URL-Videos (Typ other)! Bei Videos von Plattformen wie z.B. YouTube hat er keine Wirkung.
Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos

new.pngFalls Sie nur einen selektiven Ausschnitt eines YouTube-Videos zeigen möchten, d.h. ab einer gewissen Stelle des Videos starten und/oder an einer bestimmten Stelle des Videos enden wollen, so verwenden Sie dafür den start- bzw. den endat-Parameter. Beide Angaben erfordern einen zusätzlichen Zeitwert in Sekunden. Dazu ist die Beginn- bzw. Endestelle in Sekunden umzurechnen, z.B. 21:32 entspricht 1292 (21*60+32).

Beispiel: Um einen Song eines längeren Festival-Videos von Stelle 21:32 bis Stelle 31:35 anzuzeigen, ist folgender Befehl zu verwenden:

<div class="html5video youtube start-1292 endat-1895" id="qNNecZkPY2Y"></div>

Um nur ab einer bestimmten Stelle zu starten, reicht die alleinige Angabe des start-Parameters.

Anzeige von jsfiddle-Codebeispielen

jsfiddle.net ist eine Plattform, mit der das Zusammenspiel von HTML-, CSS- und JavaScript-Elementen dargestellt, getestet und visualisiert werden kann. Fertige Lösungen können zu Lernzwecken auf anderen Webseiten eingebunden werden. Das hat zwar wenig mit Videos zu tun, allerdings ist der Einbettungsbefehl fast identisch mit einem Video-iframe-Kommando. Zur Einbindung eines jsfiddle-iFrames wird — ähnlich der Videofunktion — nur eine ID benötigt:

<div class="html5video jsfiddle" id="{id-des-jsfiddles}"></div>

Die benötigte ID des jsfiddles entspricht der ID-Kennung hinter der Adressangabe 'https://jsfiddle.net/':video3.jpg

Zusätzlich können Sie den Umfang der Anzeige festlegen. Im Standard zeigt das eingebettete jsfiddle alle vier Komponenten (html, css, js und result) an. Mit Hilfe des scope-Parameters können Sie diesen Umfang eingrenzen (Elemente durch Komma, jedoch ohne Leerzeichen, trennen, z.B. scope-css,html):

<div class="html5video jsfiddle scope-html,css,js" id="tx2w4s19"></div>

Für das Aussehen des Einbettungsobjekts stehen die Layoutversionen hell ("light") und dunkel ("dark" = Standard) zur Verfügung — diese werden über den color-Parameter aktiviert, z.B. so:

<div class="html5video jsfiddle color-light scope-html,css,js" id="tx2w4s19"></div>

Einbindung von Soundcloud-Audiostücken
soundcloud.png

soundcloud.com ist eine Musikplattform, deren Audiosamples in Webseiten eingebettet und abgespielt werden können. Da die Einbindung sich sehr ähnlich zu der einer Videodatei darstellt, kann die Videoload-Lösung dies einfach mit erledigen: benötigt wird wie immer nur die ID des Audiostücks, die sich relativ einfach aus dem iframe-Code ermitteln und kopieren lässt:video4.jpg

Noch einfacher ist es, den gesamten iframe-Code des Audiostücks in das vorhandene Videotool zu kopieren — das Tool erkennt die Quelle und die ID automatisch und liefert Ihnen den fertigen Twoday-konformen HTML-Befehl als Kopiervorlage:video5.jpg

Ein Beispiel für die Einbindung des Audiosamples Be merciful der Gruppe Kula Shaker würde demnach mit folgendem Code erzeugt werden:

<div class="html5video soundcloud" id="20636707"></div>

Um die Soundcloud-Anzeige etwas schmaler zu gestalten, kann man den Zusatz stripe ergänzen. Der Befehl

<div class="html5video soundcloud stripe" id="20636707"></div> erzeugt

Tool für Twoday-Videocode nutzen

Twoday-Videocode automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für einen Videoaufruf im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie für ein Video benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom Videoanbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code 1 des Tools kopieren. Dieses erkennt den Videoanbieter, extrahiert die korrekte Video-ID, errechnet aus Breite und Höhe das empfohlene Seitenverhältnis und stellt diese Ergebniswerte im Bereich Optionen Videoanzeige 2 ein.

Dort können Sie nun noch nach Wunsch eine kleinere Breite einstellen oder ein anderes Seitenverhältnis wählen. Bei jeder Änderung wird der entsprechende Twoday-HTML-Code neu generiert 3 und als Kopiervorlage angezeigt.

video2.jpg

Direkt unter dem Feld HTML-Code wird das gewünschte Video auf Basis Ihrer gewählten Einstellungen eingeblendet. Entspricht alles Ihren Vorstellungen, kopieren Sie den generierten HTML-Code einfach in Ihren Beitragstext.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

http://neonwilderness.twoday.net/stories/videotool

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Probleme, Fragen, Ergänzungswünsche?

Falls Sie Probleme mit dem Videotool oder bei der Anzeige von Videos bemerken, posten Sie diese bitte zusammen mit einem Screen­shot in die Kommentare. Dies gilt auch für evtl. Änderungs-/Erweiterungs­wünsche — z.B. zusätzliche Video­anbieter/Platt­formen, die integriert werden sollen.

Falls ein Videofenster schwarz bleibt, liegt der Grund meist darin, dass diese Plattform Flash-Videos verwendet. Dazu muss auf Ihrem Endgerät Adobe Flash installiert sein, was z.B. auf allen Apple- und den meisten Android-Geräten nicht der Fall ist.

Demovideos anzeigen...

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

videoload.js und video2day.js © 2015-2016 NeonWilderness — lizensiert unter MIT. Quelldateien:  GitHub.
video.js © 2013 Brightcove, Inc. — lizensiert unter Apache2.
Sehr löblich, wie Sie sich um die Probleme von und mit twoday.net kümmern!
Hach, ich habe nicht das Gefühl, dass es sehr hilfreich ist oder etwas in Bewegung bringt, Frau Araxe. Technik macht den Leuten doch eher Angst.
Danke für Ihr Engagement, mit Ihren Anleitungen zur attraktiveren Gestaltung von Weblogs dieser (leider!) dahinsiechenden Plattform Leben einzuhauchen und sie damit quasi am Tropf zu halten. Hoffentlich zeigen Ihre Anregungen Wirkung und es tut sich hier wieder bissel mehr, bevor diese Blog-Plattform gänzlich verödet. Man muss Ihnen für Ihre Bemühungen sehr danken.
Ich freue mich sehr über Ihren Kommentar, lieber Herr Nömix, und danke Ihnen für Ihre Ermutigung.
Vielen Dank für ihre gute Arbeit - hat mir heute Nacht gute Dienste erwiesen. :-)
Ich danke meinerseits für die positive Rückmeldung, Herr Blödbabbler! Wie ich sehe, haben Sie das ja mit links sauber und professionell umgesetzt — aber ich meine mich zu erinnern, dass Sie ja auch vom Fach sind.
Wäre klasse, wenn der Generator auch Bandcamp-Frames umwandeln könnte.

Bspw.: https://sunn-live.bandcamp.com/album/sunn-o-20160610-hearn-generating-station-toronto-can
Guter Hinweis. Schau ich mir gerne mal an.
Eine Einbindung von dctp.tv wäre auch klasse.
@kunstbetrieb - so, das hat jetzt etwas gedauert, aber die überarbeitete, zweite Version des Videoload-Scripts ist bereits erstellt, jedoch noch nicht hochgeladen, da ich noch die teils umfangreiche Dokumentation ergänzen muss. Neben den bekannten Providern sind nun noch Bandcamp, DCTP.tv, Slideshare und Speakerdeck hinzugekommen. Ich werde die neue Version in der kommenden Woche zur Verfügung stellen.
Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon's Must-Have-Tools
Neon's Top10 List
Neon-Award
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Foundation 5 docs
Foundation 5 github
Font Awesome Cheatsheet