FTUI Widget Video

Aus FHEMWiki

FTUI Widget Video

Das Video Widget ist ein Widget für FHEM Tablet UI, mit dem ein lokales oder auch Online Video in die FTUI eingebunden werden kann. Die URL des Videos kann entweder fest vorgegeben oder aus einem Reading gelesen werden. Das Widget ist eine ableitung aus dem Image Widget und generiert eine URL mit dem HTML "<video>" Tag


Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-device FHEM-Device, dessen Reading eine Video-URL enthält
data-get Name des Readings, das die zu verwendende Video-URL enthält STATE data-get="Video-URL"
data-path Erster Teil der URL des anzuzeigenden Videos data-path="https://www.example.com/Videos/"
data-suffix Letzter Teil der URL des anzuzeigenden Videos data-suffix=".mp4"
data-part Mittels RegEx gefiltertes Reading (data-get) mit der URL des anzuzeigenden Videos data-part=".*(http.*.mp4).*"
data-substitution Mittels RegEx ersetztes Reading (data-get) mit der URL des anzuzeigenden Videos data-substitution="s/.*(http.*.mp4).*/$1"
data-url URL des anzuzeigenden Videos data-url="https://example.com/Video.mp4"
data-fhem-cmd Befehl, der bei einem Klick auf das Bild des Videos an FHEM gesendet werden soll (Problematisch in Verbindung mit aktiven "controls" data-fhem-cmd="set Bulp01 off"
data-state-get Name des Parameters, der den Status-Wert enthält data-state-get="STATE"
data-states Ein Array an möglichen Status-Werten data-states='["on","off","pending"]'
data-classes Ein Array von CSS-Klassen. Welche Klasse zusätzlich hinzugefügt wird, entscheidet sich durch das data-states-Array data-classes='["bg-green","bg-red","bg-yellow"]'
data-size Gewünschte Breite des Videos in Pixel oder Prozent. Die Höhe wird proportional skaliert 50% data-size="248px"
data-width Gewünschte Breite des Videos in Pixel oder Prozent. 100% data-size="248px"
data-height Gewünschte Höhe des Videos in Pixel oder Prozent. auto data-height="248px"
data-opacity Durchsichtigkeit des Videos (opacity) 1.0 data-opacity="1"
data-refresh Interval in Sekunden, nachdem das Video aktualisiert werden soll 900 data-refresh="3600"
data-hide Reading, nach dessen Wert entschieden wird, ob das Video angezeigt wird, oder nicht. STATE data-hide="STATE"
data-hide-on Wert, bei dem das Video nicht angezeigt wird true,1,on data-hide-on="aus"
data-hide-off Wert, bei dem das Video angezeigt wird !on data-hide-on="an"
data-controls Kann True und False sein, bei "True"werden die Video Controls eingeblendet data-controls="True"
data-hide-parents Soll das HTML-Eltern-Element auch versteckt werden, ist hier der jQuery-Selektor einzugeben. data-hide-parents="#VideoDiv"

CSS Klassen

Klasse Beschreibung
nocache Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache

Hinweise

  • Wenn data-url nicht definiert ist, wird die URL des Bildes aus data-path + data-get + data-suffix zusammengesetzt.
  • Es kann nur data-url + data-refresh oder data-device + data-get verwendet werden, nicht beides gleichzeitig.


Beispiele

Video aus dem Internet anzeigen

Dieses einfache Beispiel zeigt die Verwendung des Video-Widgets mit einer fest vorgegebenen Internetadresse.

<div data-type="video"
     data-url="https://fhem.de/www/tablet/videos/Video.mp4"
     data-size="100px"></div>

Soll verhindert werden, dass Browser das Video aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse nocache verwendet werden:

<div data-type="video"
     data-url="https://fhem.de/www/tablet/videos/Video.mp4"
     data-size="100px"></div>
<div data-type="video"
     data-url="https://fhem.de/www/tablet/videos/Video.mp4"
     data-size="100px"
     class="nocache"></div>

URL aus einem Reading

Hier wird die URL zum anzuzeigenden Video aus dem STATE eines FHEM-Devices ausgelesen.

<div data-type="video"
	 data-device="dDummy"
	 data-get="STATE"
	 data-size="100px"></div>

Dynamische URL

In diesem Beispiel wird die URL zu einem Video anhand eines Readings zusammen gebaut.

Das entsprechende FHEM-Device liefert z.B. folgende Readings:

channels_01_channel 201 2017-02-12 09:50:50
channels_01_video Video.mp4 2017-02-12 09:50:50
channels_01_name ORF eins 2017-02-12 09:50:50
<div data-type="video"
	 data-device="jnTVSender"
	 data-get="channels_01_video"
	 data-path="https://fhem.de/www/tablet/videos/"
	 data-size="80px"></div>

data-part und data-substitution

Die URL des Videos wird aus einem Readings gefiltert bzw. zusammengebaut.

<li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
         <header>URL fromreading with part</header>
         <div data-type="video" data-device="ftuitest" data-part=".*(http.*.mp4).*" data-get="videourl"></div>
</li>
<li data-row="5" data-col="10" data-sizey="3" data-sizex="3">
         <header>URL fromreading with substitution</header>
         <div data-type="video" data-device="ftuitest" data-substitution="s/.*(http.*.mp4).*/$1" data-get="videourl"></div>
</li>