Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[liv-in-sky]

@oliverio

ich glaube, da stimmt was mit der api nicht - ich habe das script umgeschrieben und nutze nun .loadVideoById - wenn ich mehrere videos laden ill, soll mein javascript das organisieren und hintereinander abspielen

danke für's nachsehen und helfen

[liv-in-sky]

@oliverio würde dich gerne noch was fragen

ich möchte das widget mit dem yt-player in verschiedenen projekten nutzen

gibt es eine möglichkeit, ein widget , welches ein script im html teil hat, zu deaktivieren ? ich möchte, dass dieses widget das script nicht mehr ausführt

natürlich sollte das widget wieder geladen/aktiviert werden können

fällt dir da was ein ?

oder muss ich das anders lösen - z.b. das widget über einen datenpunkt zu beschreiben - dann könnte ich ja den yt-player überschreiben

[OliverIO]

@liv-in-sky
hm, müsste man mal probieren.
welches widget ist es?

wenn man die funktionsadresse erreicht, dann könnte man diese "überladen".

als start vereinfachtes Beispiel, hier wird in einem widget eine funktion definiert.

var a = function(a,b,c) {
//hier diverser code der ausgeführt wird
}
a(1,2,3)

dann könnte man an anderer stelle, nachdem die funktion definiert wurde so etwas machen

a = function(a,b,c) {}

dadurch würde die funktion die in a gepeichert ist, überladen mit einer funktion, die die selbe aufruf signatur hat, aber einfach nix macht. sie würde vom vorhandenen code noch aufgerufen werden, aber halt ohne funktion.
man könnte dann auch geänderten code reinschreiben und so eine andere Ausführung erzeugen.
Da die Erzeugung von vis widgets von der Reihenfolge nicht vorhersehbar ist (ich habe bisher noch kein Schema entdecken können, numerische Reihenfolge ist es nämlich nicht), müsste man die Funktion regelmäßig monitoren und ggfs immer wieder neu überladen.
Aber wie gesagt, das hängt davon ab wie das widget gestaltet wurde.

[liv-in-sky]

@oliverio

ist ein standard html widget

dieses widget soll in verschiedenen views aufrufbar sein

Spoiler

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"    <div id=\"player\"></div>\n\n    <script>\n      // 2. This code loads the IFrame Player API code asynchronously.\n      var tag = document.createElement('script');\n\n      tag.src = \"https://www.youtube.com/iframe_api\";\n      var firstScriptTag = document.getElementsByTagName('script')[0];\n      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n      // 3. This function creates an <iframe> (and YouTube player)\n      //    after the API code downloads.\n      var player;\n      \n      function onYouTubeIframeAPIReady() {\n        player = new YT.Player('player', {\n          height: '480',\n          width: '640',\n          videoId: '4Qgxxh-nO04',\n           playerVars:{ origin:window.location.href, enablejsapi:1,\n                       loop: 1\n                      },\n       \n          events: {\n            'onReady': onPlayerReady,\n            'onStateChange': onPlayerStateChange\n          }\n        });\n      }\n\n      // 4. The API will call this function when the video player is ready.\n      function onPlayerReady(event) {\n        event.target.playVideo();\n      }\n\n      // 5. The API calls this function when the player's state changes.\n      //    The function indicates that when playing a video (state=1),\n      //    the player should play for six seconds and then stop.\n      var done = false;\n      function onPlayerStateChange(event) {\n        if (event.data == YT.PlayerState.PLAYING && !done) {\n          \n          done = true;\n        }\n      }\n      function stopVideo() {\n        player.stopVideo();\n      }\n      \n      /*----------------------------------------------------------------------*/\n      \n      setInterval( function () {\n        console.log(vis.states.attr('javascript.0.YouTube.Command.val'))\nvar myState = player.getPlayerState();\nswitch (myState) { case -1: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"nicht gestartet\");break; case 0: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"beendet\") ;break; case 1: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"Wiedergabe\");break; case 2: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"Pause\");break; case 3: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"Buffered\");break; case 5: vis.setValue(\"javascript.0.YouTube.PlayerStatus2\",\"in Position\");break;\n\n}\n\n vis.setValue(\"javascript.0.YouTube.PlayerStatus\",player.getPlayerState());\n if(player.getPlayerState()==1) {\n vis.setValue(\"javascript.0.YouTube.Spiele\",player.getPlaylistIndex()); \n vis.setValue(\"javascript.0.YouTube.MomentanURL\",player.getVideoUrl());console.log(player.getVideoUrl());\n vis.setValue(\"javascript.0.YouTube.VideoCurrent\", Math.round(player.getCurrentTime()));\n if (player.getVideoData().title!=null ) console.log(player.getVideoData().title);\n if (player.getVideoData().title!=null ) vis.setValue(\"javascript.0.YouTube.VideoTitle\",player.getVideoData().title);\n vis.setValue(\"javascript.0.YouTube.VideoDuration\", Math.round(player.getDuration()));\n console.log(player.getDuration());\n var helperlein=player.getDuration();\n vis.setValue(\"javascript.0.YouTube.VideoDauer\", Math.floor(((helperlein)/60/60) % 24) +\"h \"+ Math.floor( ((helperlein)/60) % 60 )+\" m \" + Math.floor( ((helperlein)) % 60 )+ \" s\");\n \nconsole.log(Math.round(player.getDuration())-Math.round(player.getCurrentTime()));\n if (Math.round(player.getDuration()) - Math.round(player.getCurrentTime()) <5 ) vis.setValue(\"javascript.0.YouTube.EndeVideo\",true) ;\n vis.setValue(\"javascript.0.YouTube.Save.SaveSettingAktuell\",player.getVideoData().video_id+','+Math.round(player.getCurrentTime()));\n \n \n}\n\n\n}, 5000);\n\n      \n      \n      \n      \n      \n      \n      \n       /*----------------------------------------------------------------------*/\n      \n      \n      \n    </script>\n    \n","class":"","visibility-oid":"javascript.0.YouTube.Visible"},"style":{"left":"31px","top":"1086px","width":"640px","height":"480px","z-index":"900","background-color":"transparent"},"widgetSet":"basic"}]

dieses widget macht die steuerung

[OliverIO]

@liv-in-sky

dann verstehe ich nicht so ganz.
da ist ja der komplette code drin.
den kann man ja bearbeiten wie man möchte.
unter welche umständen soll es dann nicht mehr funktionieren?
was willst du genau erreichen?

ok nach nochmaligem lesen möchtest du ein allgemeines youtube widget habe,
das du irgendwie steuern kannst (per datenpunkt bspw) um beliebige videos abzuspielen und das informiert, wenn ein video zu ende ist.

problem am html widget ist, das der einzige weg dem widget einen datenpunkt mitzugeben das binding ist, welches man im html einbettet. Hab das zwar so noch nie getestet, müsste aber funktionieren;

<script>
var dp = "{javascript.0.test}";
</script>

weiteres problem ist, das jedesmal wenn sich der datenpunkt ändert, wird das komplette widget von der seite entfernt und wieder neu hinzugefügt. d.h.
das widget weiß nicht mehr, das es gerade noch da war. das muss man beim programmieren berücksichtigen

[liv-in-sky]

@oliverio

im moment liegt das widget mit dem yt-player in einer view und läßt sich ohne probleme steuern

ich würde aber gerne den player bzw das script deaktivieren können, weil ich gerne über einen schalter sagen möchte, auf welchen tablet, echo show oder raspi-mit kiosk der player laufen soll

das problem- alle diese player (in den verschiedenen views) werden von einem javascript gesteuert bzw , da bidirectional - geben rückmeldung - das bedeutet, das gleichzeitig mehrere player laufen und alle die selben dp des steuer-scripts füttern - das ist natürlich nicht gut. es ist schon ein problem, wenn in dem vis-editor die seite mit dem player-widget offen ist und gleichzeitig eine view mit einem player in der runtime - schon da kommt es zu seltsamen reaktionen - ist aber nicht so wild, ich deaktiviere den vis-editor tab, wenn ich das in der runtime teste und code

momentan suche ich nach einen weg, wie ich immer nur einen player aktivieren kann - je nachdem, welches tablet (view),.. ich nutzen will

ich habe mal versucht, nur das script des players in einen dp zu schreiben um den player zu aktivieren (durch das schreiben des dp wird das widget (binding) neu geladen und der player initialisiert)
zum deaktivieren setze ich dann diesen dp auf " " - so ist das script nicht mehr da (in der theorie) und alles ist gut - leider ist das nicht der fall, das script läuft im browser weiter. den player selbst kann ich mit player.destroy() stoppen - aber mein script im selben widget nicht

ist alles ein wenig schwer zu beschreiben

gerade fällt mir aber ein, dass in meinem script evtl eine abfrage rein muss, um das interval zu stoppen, wenn der player nicht existiert
werd ich gleich mal testen

[liv-in-sky]

@oliverio

warum funktioniert das nicht? möchte das interval beenden, wenn das yt-player object null ist

im browser log sieht es so aus

[OliverIO]

@liv-in-sky

ich habe mir das mal angeschaut und glaube das es in einem html widget zu schwierig ist so umzusetzen, das man davon beliebig viele in eine view einbauen kann.

Problem 1:
Das skript erzeugt ein eigenes Skripttag über das es die eigentliche Bibliothek von yoututbe lädt.
Wenn du mehrere widgets einfügst, dann wird die bibliothek mehrfach geladen. das könnte Probleme geben-

Problem 2:
Das Skript nutzt eine Funktion, welche von der geladenen Bibliothek aufgerufen wird, wenn die bibliothek geladen ist. diese funktion darf nur einmal existieren. wenn man mehrere html widgets mit dieser funktion zu vis hinzufügt, wird nur der letzte aufgerufen und die anderen nicht.

Meiner Meinung nach könnte man das nur umgehen wenn man ein eigenes widget baut, Dort wäre dann allgemeiner Code und der wüsste wieviel playerwidgets gleichzeitig auf einer vis sich befinden und kann das regeln.

zum Problem mit dem abbrechen von setInterval.
Um den abzubrechen, muss man sich die ID merken, die setInterval beim ersten Aufruf zurückgibt und clearInterval mit diesem ID löscht dann diesen.
Besser wäre setTimeout zu verwenden und am Ende des Codes dann den immer wieder neu aufzurufen, solange du abbrechen willst, dann einfach nicht nochmal neu aufrufen

https://developer.mozilla.org/de/docs/Web/API/setTimeout

[liv-in-sky]

@oliverio

was ich nicht verstehe - das log zeigt null aber das if reagiert nicht - hast du eine idee , warum das so sein könnte - dann wäre alle gut und ich könnte das schon hinbkommen

    var ytInter=  setInterval( function () {
         console.log(player.i);
     if(player.i == null || player.i==undefined || !player) {console.log("AUS");clearInterval(ytInter);}  
     .......
     .......     

hier sieht man, nachdem ich den player destroyed habe, dass null gelogt wird - verstehe das einfach nicht

[liv-in-sky]

@oliverio sagte in script im html widget hat fehler:

Problem 1:
Das skript erzeugt ein eigenes Skripttag über das es die eigentliche Bibliothek von yoututbe lädt.
Wenn du mehrere widgets einfügst, dann wird die bibliothek mehrfach geladen. das könnte Probleme geben-
Problem 2:
Das Skript nutzt eine Funktion, welche von der geladenen Bibliothek aufgerufen wird, wenn die bibliothek geladen ist. diese funktion darf nur einmal existieren. wenn man mehrere html widgets mit dieser funktion zu vis hinzufügt, wird nur der letzte aufgerufen und die anderen nicht.

ich hätte diese player in verschiedenen vis-projecten - daher sollte das kein thema sein -verschiedene geräte, die verschiedene vis projekte und deren views nutzen

in einem project in verschiedenen views - da hast du sicher recht - das ginge so nicht

[OliverIO]

@liv-in-sky woher kommt i ?

innerhalb von setTimeout/setInterval bis du nicht mehr im normalen Skript scope.
d.h. ein vor setInterval definiertes i ist innen drin nicht mehr verfügbar.
du kannst mal probieren das i (leider sehe ich den code dafür nicht) mit let anstatt mit var zu deklarieren.
wenn das nicht funktioniert, dann muss man der funktion das i per bind mitgeben.
aber irgendwie glaube ich hast du bei player.i noch ein denkfehler.
zeig mal den code wo i definiert wird

[liv-in-sky]

@oliverio

wenn ich als ersten befehl innerhalb setInterval den clearInterval aufrufe stoppt das script - aber das console log("AUS") wird schon nicht ausgeführt - if trifft nicht zu - das kapier ich nicht

das i definiert der yt-player - hier das ganze object - console.log(player) - ganz unten siehst du i -

das war der wert, der mir aufgefallen war - daher nutze ich diesen wert - ich kann auch auf player prüfen - das geht auch nicht

nach dem befehl destroy player kommt das als object zurück - daher habe ich i gnommen