Gelöst: Update HTML Widget

[michihorn]

Hallöchen
wie kann ich manuell ein Update in einem HTML erzwingen?
Es geht nicht um die Updatezeit die ich im Widget einstellen kann, sondern bei Bedarf neu laden. Ich habe eine Endlos Schleife laufen, dass Video würde sich nicht ändern. Sollte ein neues Video vorhanden sein, dann soll das neue Video in Endlos Schleife laufen, eben bis ein aktuelleres Video zur Verfügung steht.
Folgende HTML Beschreibung steht im Widget.

<video autoplay muted loop="true">
    <source src="http://192.168.178.135:8082/vis.0/NL/01Boot.mp4" type="video/mp4">
</video>

Ob sich ein neues Video eingestellt hat, wird per Script ermittelt

on({id: 'ring.0.doorbell_21502358.created_at', change: "ne"}, async function (obj) {...........

Hat jemand eine Idee?
Michael

[OliverIO]

@michihorn

Funktioniert das Loop Attribut im Video Tag nicht?
https://developer.mozilla.org/de/docs/Web/HTML/Element/video

<video muted autoplay loop>

[michihorn]

@oliverio Hallöchen Oliver
das einmal geladene Video läuft wirklich endlos. Ich speichere allerdings neue Videos meiner RING immer unter dem selben Namen, damit das Widget den richtigen Bezug hat. Sollte sich während des endlos Loops die Quelle geändert haben, also ein neueres Video unter dem selben Namen wie im Widget hinterlegt, wird das nicht berücksichtigt.
Danke für den Link, ich werde morgen mal Schauen, ob ich damit klar komme.
Gruß
Michael

[OliverIO]

@michihorn sagte in Update HTML Widget:

@oliverio Hallöchen Oliver
das einmal geladene Video läuft wirklich endlos. Ich speichere allerdings neue Videos meiner RING immer unter dem selben Namen, damit das Widget den richtigen Bezug hat. Sollte sich während des endlos Loops die Quelle geändert haben, also ein neueres Video unter dem selben Namen wie im Widget hinterlegt, wird das nicht berücksichtigt.
Danke für den Link, ich werde morgen mal Schauen, ob ich damit klar komme.
Gruß
Michael

in dem fall wird die doku zum video tag nicht helfen.
ein browser kann ja nicht überwachen ob die ursprüngliche ressource (dein video) sich geändert hat.
mir würde jetzt das folgende einfallen.
du schreibst die video url in einen datenpunkt und fügst ein veränderliches zeichen hinten an, bspw die zeit in millisekunden. immer wenn du feststellst, das sich das video geändert hat, dann beschreibst du den datenpunkt neu.
im html widget fügst du per binding diesen datenpunkt an stelle der video url ein.
damit das veränderliche zeichen das video nicht stört musst du es mit einem fragezeichen trennen (vorher mal im browser probieren)
Das veränderliche Kennzeichen benötigst du, da bei beschreiben des gleichen Inhalts in einen Datenpunkt in vis sonst keine Änderung ausgelöst wird. theoretisch dürfte der browser in diesem fall alles nach dem Fragezeichen nicht auswerten.

Beispiel Inhalt des Datnepunkts

http://192.168.178.135:8082/vis.0/NL/01Boot.mp4?12345

Inhalt des html widgets

<video autoplay muted loop="true">
    <source src="{Name des Datenpunktes}" type="video/mp4">
</video>

Also den Namen des Datenpunktes in geschweiften Klammern da reinschreiben wo die Url auftauchen soll.

[michihorn]

@oliverio sagte in Update HTML Widget:

<source src="{Name des Datenpunktes}" type="video/mp4">

Hallo Oliver,
der RING Adapter hat folgenden DP angelegt: "ring.0.doorbell_21502358.livestream_url",
der Inhalt sieht wie folgt aus:
http://DESKTOP-RQ1PD76(SmartHome):8082/ring.0/doorbell_21502358/livestream21502358_1629730800258.mp4
somit sieht der Inhalt bei neuem Ereignis immer anders aus.
Ich gehe davon aus, das "http://DESKTOP-RQ1PD76" durch die physische IP 192.168.178.xxx ersetzt werden muss.
IM HTML sieht es so aus:

<video autoplay muted loop="true">
        <source src="{ring.0.doorbell_21502358.livestream_url}" type="video/mp4">
</video>

Wie genau soll das Binding aussehen? Leider hat es noch nicht geklappt.
Gruß
Michael

[OliverIO]

@michihorn sagte in Update HTML Widget:

@oliverio sagte in Update HTML Widget:

<source src="{Name des Datenpunktes}" type="video/mp4">

Hallo Oliver,
der RING Adapter hat folgenden DP angelegt: "ring.0.doorbell_21502358.livestream_url",
der Inhalt sieht wie folgt aus:
C:\iobroker\SmartHome\iobroker-data\ring_0\snapshot\livestream21502358_1629726449884.mp4
somit sieht der Inhalt bei neuem Ereignis immer anders aus.
IM HTML sieht es so aus:

<video autoplay muted loop="true">
        <source src="{ring.0.doorbell_21502358.livestream_url}" type="video/mp4">
</video>

Wie genau soll das Binding aussehen? Leider hat es noch nicht geklappt.
Gruß
Michael

das hat deswegen nicht geklappt, weil du da einen dateipfad und keine url angegeben hast.
im ersten post hast du doch geschrieben, das das video immer unter der url http://192.168.178.135:8082/vis.0/NL/01Boot.mp4 verfügbar ist

irgendwie hat sich die fragestellung nun geändert?

[michihorn]

@oliverio sagte in Update HTML Widget:

Also den Namen des Datenpunktes in geschweiften Klammern da reinschreiben wo die Url auftauchen soll.

Hallo Oliver,
ich habe Deinen Tip umgesetzt.
In dem vom RING Adapter angelegten Datenpunkt ist die URL mit Angabe des Hostes abgelegt, dass war nicht so gut, ich habe den Hostnamen gegen die Host IP per Script getauscht.

on({id: 'ring.0.doorbell_21502358.livestream_url', change: "ne"}, async function (obj) {
var string = getState("ring.0.doorbell_21502358.livestream_url").val;
var newstring
newstring=string.replace("http://DESKTOP-RQ1PD76(SmartHome)","http://192.168.178.xxx");
log(newstring);
setState("ring.0.doorbell_21502358.livestream_url",newstring)
});

Aus "http://DESKTOP-RQ1PD76(SmartHome):8082/ring.0/doorbell_21502358/livestream21502358_1629730800258.mp4" ist nun
http://192.168.178.xxx:8082/ring.0/doorbell_21502358/livestream21502358_1629730800258.mp4 geworden.

Der Eintrag im HTML-Widget sieht jetzt so aus:

<video height="448px" width="800" autoplay muted loop="true">
        <source src="{ring.0.doorbell_21502358.livestream_url}" type="video/mp4">
</video>

Das klappt.
War ein toller Tip mit dem Binding.
Gruß
Michael