Archiv des Autors: NeonWilderness

Twoday-Tipp #8 – Videos anzeigen

video2day.jpg

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 11 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:

Kennung Videoanbieter
youtube www.youtube.com
vimeo www.vimeo.com
vevo www.vevo.com
bliptv www.blip.tv
dailymotion www.dailymotion.com
putpat www.putpat.tv
vube www.vube.com
liveleak www.liveleak.com
vine www.vine.co
metacafe www.metacafe.com
myvideo www.myvideo.de
other eigene 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://googledrive.com/host/0B87rILW4RVIJUFpWT2dLeG9RUzg/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://googledrive.com/host/0B87rILW4RVIJUFpWT2dLeG9RUzg/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.

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 NeonWilderness — lizensiert unter MIT. Quelldateien:  GitHub.
video.js © 2013 Brightcove, Inc. — lizensiert unter Apache2.

Twoday-Videocode generieren

Anleitung: Kopieren Sie den Einbettungscode Ihres Videos in das Feld iframe-Code, um die Optionen zur Videoanzeige vorzubelegen. Ergänzend können Sie die Videobreite anpassen oder alternativ alle Optionen manuell einstellen. Den resultierenden HTML-Code für Twoday kopieren Sie anschließend in Ihren Beitragstext.

iframe-Code

Optionen Videoanzeige
HTML-Code für Twoday

Missverständnisnotiz

vibplate.jpg

Thema: Notiz an mich selbst

Rubrik: Missverständnisse vermeiden

Wenn im Fitnessstudio eine Frau zu einer Freundin sagt: „Willst Du auch auf den Vibrator?„, dann ist damit die Technogym Power Plate Vibrationsplatte gemeint und nichts anderes!

PS. Nicht mehr verstört gucken!

PPS. Wichtig: Keine Alternativangebote machen!

Valar morghulis

dermüdetod.jpg

Seit meinem Zerwürfnis mit dem Tod sind einige Jahre vergangen. An der Seite meines Vaters habe ich gut und lange gegen ihn gekämpft, doch schließlich, so wie stets, obsiegte der Knochenmann und nahm ihn mit. Lange ließ er unsere Familie unbehelligt und schnitt die Leben an anderen Orten. Nun ist er zurück, der schwarze Stummmacher.

„So schwach habe ich mich in meinem ganzen Leben noch nicht gefühlt!“, sagt meine Mutter und hustet in einem fort. Eine Beinthrombose ist in die Lunge gewandert und hat dort eine Embolie ausgelöst. „Diese Hilflosigkeit macht mich verrückt“. Ihre Hände zittern, als sie nach einem Glas Wasser greift.

„Da ist noch etwas anderes“, murmelt die junge Stationsärztin, als meine Schwester und ich in ihrem Arztzimmer sitzen. Sie schaut nervös in ihre Krankenakten und ich fühle, dass sie solche Situationen noch nicht oft erlebt hat. „Ihre Mutter hat Krebs, maligne Metastasen an den Lymphknoten, aber wir konnten den Herd noch nicht finden“, sagt die Ärztin. „Dazu würden wir gerne eine Lymphknoten- und Beckenkammbiopsie durchführen, wenn Ihre Mutter zustimmt“.

Zwei Wochen später haben wir einen Termin im medizinischen Zentrum. „Das bringt Ihnen nichts!“, sagt die Onkologin deutlich zu nüchtern, während sie streng über ihre Halbbrille schaut, „der Eierstockkrebs hat bereits in Ihre Lymphknoten metastasiert, da nützt eine OP nichts mehr.“ Erst jetzt versteht meine Mutter die volle Tragweite dieser Analyse. „Kann ich denn gar nichts mehr dagegen tun?“, fragt sie leise. „Das müssen Sie entscheiden“, sagt die Ärztin bestimmt und kühl, „das ist eine Abwägung zwischen Lebenszeit und Lebensqualität. Sie können eine milde Chemotherapie machen, da haben Sie nicht viel zu verlieren.“. Im Gegensatz zur jungen Stationsärztin hat diese hier schon so viele solcher Gespräche geführt, dass es sie wohl bereits langweilt; zumindest klingen Empathie und Engagement in meinen Ohren anders.

„Womit habe ich das verdient“, fragt sie in die Stille, als wir wieder zuhause an ihrem Küchentisch sitzen, „ich habe doch immer so solide gelebt?“. „Denk nicht über solche Fragen nach“, antworte ich, „sie haben keinen Sinn und führen zu nichts. Lass uns lieber die Zeit nützen und genießen, die wir noch haben“. „Du hast Recht“, sagt sie, „und wir müssen einiges besprechen“.

All diese vielen Götter und Religionen da draußen, die so viel Unglück und Schmerz über die Menschen gebracht haben. Dabei ist nur der Tod der alleinige, wahre Gott. Und das einzige, was wir ihm mit Verve täglich entgegenhalten können ist: „Heute nicht!“. Valar morghulis!

Twoday-Tipp #7 – Beitragsmarkierung

newupdatestory.jpg

In tiefer Weihnachtsnacht wurde dem Forum die Frage beschert, ob es möglich sei, Beiträge und Kommentare in der Seitenspalte je nach Aktualisierungsstatus automatisch mit Neu oder Update zu kennzeichnen. Und auch hier heißt die richtige Antwort wieder: „Im Prinzip Twoday-Standard nein, jedoch, mit zwei kleinen Ergänzungen in den richtigen Skins geht es doch.

Zwar bietet die Twoday-Software keine direkte Funktion, um einen neuen von einem geänderten Beitrag zu unterscheiden, allerdings gibt es zu jedem Beitrag (und auch zu jedem Kommentar) zwei Zeitstempelfelder, die per Makro abrufbar sind:

  1. <% story.createtime %> gibt das Ersterstellungsdatum eines Beitrags,
  2. <% story.modifytime %> das Datum der letzten Beitragsänderung wieder.

Wenn modifytime also gleich createtime ist, darf man davon ausgehen, dass der betreffende Beitrag noch nie geändert wurde, also „Neu“ ist.

Relativierung: Dies wirft allerdings folgende Fragen auf: Wie lange gilt ein neuer Beitrag als „neu“? Soll er nach Ablauf einer gewissen Zeitspanne immer noch als „neu“ gekennzeichnet werden? Wohl eher nicht. Und ab wann gilt ein neuer Beitrag als „geändert“? Bereits dann, wenn man drei Minuten nach dem Anlegen einige Tippfehler korrigiert?

Diese Festlegungen sind individuell und können nach eigenem Gusto in der unten beschriebenen Lösung angepasst werden. Als Vorbelegung sind folgende Regeln abgebildet:

  1. Ist ein Beitrag oder Kommentar älter als 7 Tage, erhält er keine Kennzeichnung mehr als „neu“ oder „geändert“.
  2. Liegt zwischen Änderungsdatum und Erstellungsdatum nicht mehr als eine Minute, so gilt der Beitrag weiter als „neu“.

Der Abstand von einer Minute darf übrigens nicht auf Null verringert werden, da Twoday manchmal schon beim Neuanlegen eine (falsche) Minutendifferenz zwischen den beiden Zeitstempeln hat.

Installation der Beitragskennzeichnung

Um die Beitragsmarkierung zu aktivieren, müssen sowohl im Skin Site.style sowie in Story.historyview kleine Ergänzungen vorgenommen werden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Stylesheet (Site.style), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort folgende Zeilen hinein:
    .historyItem:before { content: ""; padding: 2px 4px; color: #fff; border-radius: 3px; font-size: 10px; font-weight: bold; margin-right: 5px; vertical-align: bottom; display: block; }
    .historyItem.new:before { content: "New"; background: #ee2424; display: inline; }
    .historyItem.update:before { content: "Update"; background: #aaa; display: inline; }

    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster, kopieren Sie ihn in die Zwischenablage und von da in das Skin-Textfeld.
    Ihr Stylesheet müsste nun in etwa so aussehen:

    newupdatestory3.jpg

  5. Klicken Sie auf „Speichern und Schließen“ um Ihre Änderungen zu sichern.
  6. Scrollen Sie nun in der Skinübersicht weiter herunter bis zur Überschrift „Elemente in den Seitenleisten“ und klicken Sie dort auf »kürzlich geändert« Eintrag (Story.historyview).
  7. Kopieren Sie das nachstehende Script vor das letzte </div> in diesem Skin:
    <script type="text/javascript">
    var now = Date.now(), modified = Date.parse("<% this.modifytime format="yyyy/MM/dd HH:mm" %>"), created = Date.parse("<% this.createtime format="yyyy/MM/dd HH:mm" %>");
    if (now - modified < 7*24*60*60*1000){
    scriptTag = document.getElementsByTagName("script");
    scriptTag[scriptTag.length-1].parentNode.className += (modified - created > 60000 ? " update" : " new");
    }
    </script>
    
  8. Ihr Modulcode sollte nun folgendermaßen aussehen:

    newupdatestory1.jpg

  9. Klicken Sie nach erfolgter Änderung unten auf „Speichern und Schließen“. In der Anzeige unter „Aktuelle Beiträge“ sollten nun farbige Markierungen neben den Beiträgen auftauchen (Hard-Reload via Strg-F5 nicht vergessen!).

    newupdatestory0.jpg

Markierung auch für Kommentare aktivieren

Falls Sie auch Kommentare automatisch mit „Neu/Geändert“-Markierungen versehen wollen, müssen Sie noch eine weitere Änderung vornehmen. Statt Story.historyview heißt der entsprechende Skin Comment.historyview. Dieser wird nicht direkt über die Skinseite zur Änderung angeboten, kann aber leicht folgendermaßen aufgerufen und verändert werden:

  1. Rufen Sie zunächst erneut den bereits geänderten Skin Story.historyview auf (siehe oben).
  2. Gehen Sie nun oben in die Browseradresszeile und ersetzen Sie „Story“ durch „Comment

    newupdatestory2.jpg

  3. Nachdem Sie die Datenfreigabe-/Return-Taste gedrückt haben, wird der Skin Comment.historyview angezeigt. Kopieren Sie das oben erwähnte Script auch hier vor das letzte </div> und speichern Sie die Änderung.
Zeitspannen ändern

Die vorbelegte Zeitspanne von 7 Tagen, ab der keine Markierungen mehr angezeigt werden, kann einfach geändert werden.

Twoday-Zeitstempel reflektieren vergangene Millisekunden seit einem bestimmten Fixdatum. Die Differenz aus modifytime und createtime ist also eine Millisekundenzahl. Im Script finden Sie eine Stelle now – modified < 7*24*60*60*1000, die die Millisekundenzahl für 7 Tage darstellt. Wollen Sie die Markierung beispielsweise erst nach 14 Tagen stoppen, ersetzen Sie 7 durch 14.

Sie können auch ändern, wie lange ein Beitrag die Markierung „Neu“ behält, obwohl Sie ihn zwischenzeitlich ändern.

Im Script wird an der Stelle modified – created > 60000 geprüft, ob bereits eine Minute (60 Sekunden * 1000 Millisekunden) vergangen ist, bevor eine „Änderung“ konstatiert wird. Wollen Sie z.B. 4 Stunden für eigene Anfangskorrekturen reservieren, dann ersetzen Sie die 60000 durch 4*60*60*1000.

Farben oder Text ändern

Farben oder Text ändern Sie im Stylesheet (Skin Site.style). Die Neu-Markierung wird durch den eingefügten Eintrag .historyItem.new:before gesteuert, die Geändert-Markierung entsprechend durch .historyItem.update:before. Die Hintergrundfarbe wird über den Parameter background: #farbe gesetzt. Den richtigen Wert für Ihre Wunschfarbe können Sie z.B. hier ermitteln.

Texte ändern Sie im Parameter content. Dort können Sie für „New“ und „Update“ z.B. „Neu“ und „Geändert“ oder beliebige andere kurze Texte einsetzen.

Problematische Änderungserkennung unter Twoday

Die Twoday-Software erkennt nicht immer zuverlässig Textänderungen an Beiträgen oder Kommentaren (wodurch dann der modifytime-Zeitstempel nicht verlässlich gesetzt wird). Z.B. wird keine Änderung erkannt, wenn man nur den Titel ändert. Auch im Textbereich eines Beitrags/Kommentars werden Änderungen erst ab einem bestimmten, größeren Umfang registriert.

Wenn man also eine Änderungserkennung erzwingen will, kopiert man eine längere Zeichenkette, sichert einmal, löscht diese wieder und sichert erneut. Umständlich, aber das funktioniert dann.

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

© 2014 NeonWilderness — lizensiert unter MIT.