Ankündigung FTUI Video Widget

Tommy82 · 05 Januar 2019, 20:19:30

Hallo,
da ich vor dem Problem stand ein Video in der FTUI einzubinden und mit den bisherigen Lösungen mittels des Image Widgets nicht zum gewünschten erfolg kam, habe ich kurzerhand auf Basis des Image Widgets ein Video Widget erstellt.
Grundsätzlich funktionieren alle Attribute des Image Widgets, plus das HTML <video> controls Attribut.

Da das ganze für mich auch noch Neuland ist, hab ich noch keine weiteren Attribute eingebaut, aber z.b. autoplay etc. wären noch denkbar, wenn es gewünscht wird.

Es würde mich freuen wenn der ein oder andere das Widget gebrauchen kann und es testen würde. Über positive wie auch negative Rückmeldungen würde ich mich sehr freuen.
Ich habe das ganze am PC, Laptop, Tablett und Smartphone mit verschiedenen Browsern getestet und bis jetzt keine Probleme feststellen können

Ich habe zur grundsätzlichen Benutzung schonmal eine Wiki Seite angelegt.
https://wiki.fhem.de/wiki/FTUI_Widget_Video#Dynamische_URL
auch da würde ich mich freuen, wenn es Anmerkungen/Verbeesserungs Vorschläge gibt.

Sollte es die nächsten Tage keine Problem Meldungen geben, dann würde ich das Widget in den normalen Fhem installations/update Prozess integrieren,
bis dahin einfach die Datei im Anhang in eure Fhem installation unter

Code Auswählen

/fhem/www/tablet/js/ kopieren

Heiner33 · 15 März 2019, 21:10:06

Hallo Tommy,

habe gerade mal dein Video Widget ausprobiert und leider ein Problem damit, hoffe du kannst mir dabei helfen.

Bekomme im Google Chrome Browser eine mir unerklärliche Fehlermeldung, sobald ich bei der data-size über 740px gehe (siehe Attachment).

Ich habe folgende kleine Beispiel Tablet UI Seite gebaut, die den Fehler reproduzierbar macht.

Code Auswählen

<!DOCTYPE html>
<html>

<head>

    <link rel="icon" href="favicon.ico" type="image/x-icon" />

	<meta name="widget_base_width" content="37">
    <meta name="widget_base_height" content="35">

    <meta name='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>


    <meta name='debug' content='2'>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>


<!-- ============ Menu ==================== -->
<!-- ====================================== -->

            <li data-row="1" data-col="1" data-sizex="21" data-sizey="15">
				<header>Video-Test</header>

<div data-type="video" data-device="httpmod_tagesschau100" data-get="Link" data-size="741px"></div>

            </li>
        </ul>
    </div>


</body>

</html>

Als Video versuche ich die folgende URL abzuspielen:
http://media.tagesschau.de/video/100s/2019/0315/TV-100s-1830.webl.h264.mp4

PS: Der Fehler tritt ausschließlich im Google Chrome Browser auf und scheint mit den Controls zusammen zu hängen. Die scheinen ab einer Videobreite von mehr als 740px anders dargestellt zu werden. Ohne Controls gibt es auch keinen Fehler. In Safari bekomme ich diesen Fehler generell nicht.

Vielen Dank

MegaData · 23 März 2019, 14:29:50

Also ich muss sagen: seit den neuesten Updates geht bei mir gar nichts mehr... Ich hatte bisher den Stream meiner Türsprechanlage am laufen (H264), der geht jetzt weder über das Image-, noch über das Video Widget. Es kommt einfach kein Bild, obwohl ich es über selbige IP aufrufen kann.
Das "Link"-Widget, mit dem ich das öffnen der Tür auslöse, funktioniert ebenso wenig - auch das ging früher mal... Ich habe das so konfiguriert:

Code Auswählen


<ul>
	<li data-row="1" data-col="1" data-sizex="7" data-sizey="3">
	<header>LIVEKAMERA</header>
	<div data-type="video"
        data-url="http://192.168.178.57:8080/video.cgi"
        class="nocache center-align"
		data-controls="False">
    </div>
	<div data-type="link"  
			data-url-xhr="http://192.168.178.57/fcgi/do?action=OpenDoor&UserName=meinuser&Password=meinpw&DoorNum=1"
			data-icon="fs-radio_checked" 
			data-fhem-cmd="set speak Die Tür wird geöffnet."
			class="small inline"></div>
			<div class="small inline">Tür öffnen</div>
	<div 	data-type="link"  
			data-url-xhr="http://192.168.178.57/fcgi/do?action=OpenDoor&UserName=meinuser&Password=meinpw&DoorNum=2" 
			data-icon="fs-radio_checked" 
			data-fhem-cmd="set speak Das Tor wird geöffnet."
			class="small inline"></div>
			<div class="small inline">Tor öffnen</div>
	</li>
</ul>

Tommy82 · 23 März 2019, 14:33:14

Hi, @Heiner33 sorry hab deine Beitrag grade erst gesehen.
@ all bin grade im Urlaub, werde es mir danach direkt ansehen

Mfg
Thomas

Gesendet von iPhone mit Tapatalk

MegaData · 11 April 2019, 14:35:48

Gibt es schon was Neues zu dem Thema ? Oder bin ich der Einzige wo es nicht mehr geht :-O ?

Heiner33 · 16 April 2019, 19:18:25

Ich warte auch noch

Tommy82 · 11 Mai 2019, 20:07:43

Hi,
sorry, ich war die letzten Wochen etwas sehr im Stress......

Das gute ist, als ich das Video Widget grade bei mir im aktuellen Opera angesehen habe, funktionierte alles wie es soll.

Hat noch jemand aktuell Probleme damit?

somansch · 12 Mai 2019, 00:46:15

Hi Tommy,

für mp4 funktioniert es gut. Ich möchte gern das Wetter Video aus dem Tagesschau RSS wiedergeben. Hierzu habe ich ein Device, welches mir den aktuellen Videonamen als Reading "Link" liefert, z.B. "video-537677~ardplayer.h". Die komplette URL ist "www.tagesschau.de/multimedia/video/video-537677~ardplayer.h".

Also habe ich folgende Definition:

Code Auswählen

<div data-type="video" data-device="rss_wetter" data-get="Link" data-path="www.tagesschau.de/multimedia/video/"></div>

Leider funktioniert dies nicht

Wenn man die URL im Chromebrowser eingibt, funktioniert es...

Vielleicht hast du eine Lösung.

Danke und Gruß
Andreas

Tommy82 · 12 Mai 2019, 09:20:23

Hi,
das dürfte an dem eingebetteten ARD-Player liegen,
ich würde dafür nicht das Video Widget nehmen, sondern eher z.b. iframe, wenn du dir denn link z.b. in Fhem als reading aus dem data-path und dem data-get zusammen bauen würdest, dann würde es z.b. hiermit funktionieren

Code Auswählen

<!-- ============== iFrame ================ -->
<li data-row="4" data-col="4" data-sizex="3" data-sizey="2">
        <header class="headerTransparent">Wetter</header>	
<div data-type="iframe" 
data-device="rss_wetter"
data-url="state"
data-width="400"
data-height="200"></div>
</li>

wobei data-url das reading wäre welches den link aus deinem data-path und data-get zusammengesetzt enthält

Hab das mal mit einem dummy bei mir getestet, funktioniert ohne Probleme.

somansch · 12 Mai 2019, 11:15:37

Danke für den Tip. Hast du villeicht noch eine Idee, wie ich die komplette URL als ein userReading hinbekomme?

Also, ""www.tagesschau.de/multimedia/video/" + "rss_wetter:Link"

somansch · 12 Mai 2019, 13:13:48

Hab's hinbekommen. Hier die Def, um die aktuelle Wettervideo-URL der Tagesschau zu bekommen:

Code Auswählen

define rss_wetter HTTPMOD http://wetter.tagesschau.de/ 3600
attr rss_wetter userattr event-on-change-reading reading01Name reading01Regex stateFormat
attr rss_wetter event-on-change-reading Video
attr rss_wetter reading01Name Video
attr rss_wetter reading01Regex www.tagesschau.de/multimedia/video/(...........................)
attr rss_wetter stateFormat Link
attr rss_wetter userReadings Link {"http://www.tagesschau.de/multimedia/video/".ReadingsVal("rss_wetter", "Video","error")}

setstate rss_wetter http://www.tagesschau.de/multimedia/video/video-537759~ardplayer.html
setstate rss_wetter 2019-05-12 13:10:06 Link http://www.tagesschau.de/multimedia/video/video-537759~ardplayer.html
setstate rss_wetter 2019-05-12 13:10:06 Video video-537759~ardplayer.html

Die RegEx ist "amateurhaft", tut aber ihrer Dienst

Viele Grüße
Andreas

somansch · 13 Mai 2019, 23:45:35

Ist es möglich bzw. geplant eine "Autostart" Funktion zu realisieren? D.h. das Video soll sofort automatisch abgespielt werden.

Tommy82 · 15 Mai 2019, 21:09:37

Hi,
geplant hatte ich das nicht, aber machbar sollte es sein

Mit fällt nur grade kein passendes Szenario ein.

somansch · 15 Mai 2019, 22:45:10

Das Szenario ist ganz einfach

ich habe das aktuelle Tagesschauvideo in einem Untermenü "News". Nun soll das Video direkt starten, wenn ich diese Seite aufrufe. Im Moment muss man nach dem Aufruf der Seite noch den "Play-Button" drücken.

MegaData · 27 Juni 2019, 13:11:02

Hallo zusammen,

also bei mir funktioniert es nach wie vor nicht. Weder als IMG, noch als Video bekomme ich meinen Stream eingebettet. Bild zeigt das Symbol dass er nicht laden konnte, Video zeigt den Player - startet aber nicht. Gebe ich die Adresse einfach so im Browser ein sehe ich ein Bild. Gibt es spezielle Stream-Parameter die zu beachten sind ?

VG

MegaData · 27 Juni 2019, 14:33:54

Ich glaube ich weis woran es liegt... Soweit ich das sehe möchte FTUI kein HTTP mehr aufrufen, wenn ich es selber über HTTPS aufrufe. Weder ein Link, noch ein Stream, noch ein Bild kommt ohne HTTPS einzusetzen. Die Lösung ist jetzt also eine extra Instanz für FTUI ohne HTTPS einzusetzen ?

Heiner33 · 27 Juni 2019, 17:01:48

Mein Problem ist auch noch unverändert. Siehe Beitrag oben. Lässt sich auch mit meinem Beispiel-Code reproduzieren.

curt · 18 Juli 2019, 00:06:38

Zitat von: Tommy82 am 05 Januar 2019, 20:19:30
Es würde mich freuen wenn der ein oder andere das Widget gebrauchen kann und es testen würde.

(Für tagesschau100sec genutzt.)
Danke-schön!

sn0000py · 29 August 2019, 09:15:55

Hallo, ist das normal das wenn ich das Video in Fullscreeen schalte, und dann wieder zurück, das ich zwei Rote Notify bekomme mit

Error
:0
?

Tommy82 · 05 September 2019, 20:03:02

Zitat von: sn0000py am 29 August 2019, 09:15:55
Hallo, ist das normal das wenn ich das Video in Fullscreeen schalte, und dann wieder zurück, das ich zwei Rote Notify bekomme mit

Error
:0
?

Hallo,
bekomme plötzlich auch genau die Meldung, nur leider hab ich keine Ahnung wieso..... Funktioniert auch alles normal bei mir

@an alle anderen, hat aktuell einer ein Problem mit dem Video WIdget? Bin leider zeitlich etwas sehr eingeschränkt im MOment und kommen kaum zu Fhem im allgemeinen

OdfFhem · 15 November 2019, 08:01:12

@Tommy82

Zunächst einmal vielen Dank für dieses nützliche Widget und die zugehörige Wiki-Seite.

Da es zur Zeit jedoch noch kein offizielles Widget ist, fände ich es besser, wenn auf der Wiki-Seite ein entsprechender Hinweis und eine Verlinkung zu diesem Beitrag enthalten wäre - schon allein wegen der Download-Notwendigkeit. Die Verlinkung zu diesem Beitrag wäre vermutlich auch generell sinnvoll, da dieser Beitrag ja quasi die Anlaufstelle sein soll.

Desweiteren wäre es wahrscheinlich sinnvoll, das Widget in https://wiki.fhem.de/wiki/FHEM_Tablet_UI#3rd_Party_Widgets zu integrieren.

Tommy82 · 16 November 2019, 21:35:20

Hi,
danke für deinen Hinweis, hab es unter den 3rd Party Widgets aufgeführt, im Video Widget Wiki gibt es ganz unten unter "Installation" einen Link zu diesem Thread hier

curt · 16 November 2019, 21:46:02

Das hatte ich auf die Schnelle zugefügt, dann aber keine Zeit mehr, das hier zu vermerken. (Der Link stimmt noch nicht mit den dortigen Konventionen überein, aber das wird noch).

guck123 · 29 November 2019, 17:33:01

Moin Moin,

super Widget. Funktioniert wunderbar. Autoplay hab ich noch hinzugefügt. Funktioniert mit Chrome.

Sind nur 4 Coding Zeilen. Bei Interesse einfach melden.

Grüße,

Denis

Tommy82 · 29 November 2019, 21:19:38

Zitat von: guck123 am 29 November 2019, 17:33:01
Moin Moin,

super Widget. Funktioniert wunderbar. Autoplay hab ich noch hinzugefügt. Funktioniert mit Chrome.

Sind nur 4 Coding Zeilen. Bei Interesse einfach melden.

Grüße,

Denis

Hi,
klar her damit, werd ich gerne einbauen wenn du es schon so freundlich anbietest:-)

guck123 · 29 November 2019, 22:29:28

Hi Tommy82,

hab auch noch eingefügt, dass das video immer als schleife abgespielt wird. Die fetten Zeilen sind die aus deinem Script:

elem.initData('controls', '');
elem.initData('autoplay', '');
elem.initData('muted', '');
elem.initData('loop', '');

und

muted: 'muted',
loop: 'loop',
autoplay: true,
alt: 'video',
controls: true

Ich spiele damit jetzt das Video von meiner Blink Kamera im TabletUI ab wenn jemand an der Tür klingelt. Daher auch der Loop.

Grüße,

Denis

OdfFhem · 30 November 2019, 08:46:30

@guck123,@Tommy82

Die vorgeschlagene Änderung bewirkt, dass die Einstellungen statisch vorgenommen werden. Man kann zwar andere Einstellungen via Attribut mitgeben, diese haben aber keinerlei Auswirkung. Dieses Verhalten gilt übrigens schon für data-controls.

Tommy82 · 01 Dezember 2019, 19:48:58

Zitat von: guck123 am 29 November 2019, 22:29:28
Hi Tommy82,

hab auch noch eingefügt, dass das video immer als schleife abgespielt wird. Die fetten Zeilen sind die aus deinem Script:

elem.initData('controls', '');
elem.initData('autoplay', '');
elem.initData('muted', '');
elem.initData('loop', '');

und

muted: 'muted',
loop: 'loop',
autoplay: true,
alt: 'video',
controls: true

Ich spiele damit jetzt das Video von meiner Blink Kamera im TabletUI ab wenn jemand an der Tür klingelt. Daher auch der Loop.

Grüße,

Denis

Und das funktioniert bei dir? Wie sieht deine dazugehörige html aus? hab das grade mal bei mir ein gebaut, aber es ändert sich bei mir erst mal nichts!?

Ein das verhalten was @OdfFhem beschreibt kann ich mich leider auch erinnern, statisch solte es aus meiner sicht nicht sein, es muss sich konfigurieren lassen, vorschläge dazu nehme ich gerne entgegen

guck123 · 04 Dezember 2019, 19:01:44

Zitat von: Tommy82 am 01 Dezember 2019, 19:48:58
Und das funktioniert bei dir? Wie sieht deine dazugehörige html aus? hab das grade mal bei mir ein gebaut, aber es ändert sich bei mir erst mal nichts!?

Ein das verhalten was @OdfFhem beschreibt kann ich mich leider auch erinnern, statisch solte es aus meiner sicht nicht sein, es muss sich konfigurieren lassen, vorschläge dazu nehme ich gerne entgegen

Moin. Ja bei mir funktioniert das soweit. Mit Chrome unter Windows und Chromium unter Raspbian.

Grüße

Denis

Gesendet von meinem BKL-L09 mit Tapatalk

StephanFHEM · 20 Dezember 2019, 20:17:41

hallo,

ich versuche das Video-Widget mit meinen Arlo Pro 3 Cams zu nutzen. Leider zeigt er mir das Video nicht an. Hab Testweise mal ein Video mit geringerer Auflösung genommen. Damit hat es dann geklappt. Ist es möglich das Widget auch mit 2K-Videos zu nutzen? Oder liegt es am Codec?

Tungsten · 28 Januar 2020, 18:28:56

Hallo,

wäre es möglich auch noch einen mjpeg Stream einzubinden, bei dem auch user und pwd übergeben werden müssen?
Im Moment bekomme ich in Firefox einen Fehler weil kein unterstützetes Format oder MIME-Type gefunden wurde.

Code Auswählen

		

<li data-row="5" data-col="6" data-sizex="4" data-sizey="7">
                <header>Webcams außen</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">

			<div data-type="video" data-url="http://user:pwd@IP:port/cgi-bin/mjpg/video.cgi?channel=0&subtype=1" data-refresh="60" class="nocache" data-height="300" data-width="500">
			</div>	

			</div>
		</div>
	</div>
 </li>

Tommy82 · 15 Februar 2020, 19:55:24

Zitat von: StephanFHEM am 20 Dezember 2019, 20:17:41
hallo,

ich versuche das Video-Widget mit meinen Arlo Pro 3 Cams zu nutzen. Leider zeigt er mir das Video nicht an. Hab Testweise mal ein Video mit geringerer Auflösung genommen. Damit hat es dann geklappt. Ist es möglich das Widget auch mit 2K-Videos zu nutzen? Oder liegt es am Codec?

Hi,
sorry für die späte Rückmeldung, mir fehlt im Moment leider komplett die Zeit.....

Also in der JAVA und HTML wird niergens auf 2k Videos oder ähnliches geprüft, läuft das Video denn wenn du das so im Webbrowser aufrufst? Würde da eher auf ein Codec Problem tippen.

Tommy82 · 15 Februar 2020, 19:59:57

Zitat von: Tungsten am 28 Januar 2020, 18:28:56
Hallo,

wäre es möglich auch noch einen mjpeg Stream einzubinden, bei dem auch user und pwd übergeben werden müssen?
Im Moment bekomme ich in Firefox einen Fehler weil kein unterstützetes Format oder MIME-Type gefunden wurde.

Code Auswählen Erweitern
<li data-row="5" data-col="6" data-sizex="4" data-sizey="7"> <header>Webcams außen</header> <div class="sheet"> <div class="row"> <div class="cell"> <div data-type="video" data-url="http://user:pwd@IP:port/cgi-bin/mjpg/video.cgi?channel=0&subtype=1" data-refresh="60" class="nocache" data-height="300" data-width="500"> </div> </div> </div> </div> </li>

Puh,
würde ich gerne machen, aber mir fehlt grade eine idee wie ich das einbauen kann.....Du übergibts deinen User und PW ja im Link in deiner HTML Datei, weiss grad nicht was in der JAVA einbauen müsste, bzw. ob das überhaupt etwas bewirken würde, hätte auf anhieb gesagt normal müsste es mit deinem Link funktionieren.
Was passiert denn wenn du deinen HTML LInk so im Browser eingibst?

MFG

Sailor · 25 April 2020, 20:33:53

Ein herzerfrischendes "Moin" vom achtern Diek vorwech!

@Tommy

Ich habe mal eine Frage ob es moeglich wäre, einen Alternativen Text einzublenden, sobald das Video im "data-url" oder "data-get" nicht verfügbar ist.
So etwas wie "data-alt-text"

Gruß
Sailor

Badflex · 03 Januar 2021, 13:34:21

Hallo,
hab hier ne Netatmo kamera. die URL endet mit m3u8.
leider spielt er es nicht ab.