Vis2 Mediaplayer

[David G.]

Hallo,

ich bin ja bekennender Lovelace Nutzer.
Allerdings komme ich jetzt doch an meine Grenzen und würde gerne etwas in vis umsetzen (falls möglich) und als iframe in Lovelace einbinden.

Ich habe mir diese responsive Tabelle für AgendDVR erstellt:

Der Code sieht so aus (Nicht schön formatiert was mein Blockly da generiert ^^) :

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; margin: auto; max-width: 1200px;"><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_20-00-10_374.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_20-00-10_374_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 20:00<br>15s, 0.38 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_19-10-53_896.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_19-10-53_896_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 19:10<br>15s, 0.45 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_TimeLapse_2025-03-18_18-51-38.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_TimeLapse_2025-03-18_18-51-38_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 18:51<br>0s, 0.47 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_TimeLapse_2025-03-18_18-50-42.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_TimeLapse_2025-03-18_18-50-42_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 18:50<br>0s, 0.46 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_TimeLapse_2025-03-18_18-49-58.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_TimeLapse_2025-03-18_18-49-58_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 18:49<br>0s, 0.3 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_TimeLapse_2025-03-18_18-44-45.mp4">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_TimeLapse_2025-03-18_18-44-45_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 18:44<br>1s, 2.09 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_18-11-10_499.mkv">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_18-11-10_499_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 18:11<br>16s, 16.68 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_17-31-17_381.mkv">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_17-31-17_381_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 17:31<br>16s, 17.47 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_17-03-52_545.mkv">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_17-03-52_545_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 17:03<br>16s, 16.14 MB</span>     </div><div style="display: flex; flex-direction: column; align-items: center;">         <a href="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_16-53-40_332.mkv">             <img src="http://192.168.99.84:8090/fileThumb.jpg?oid=8&fn=8_2025-03-18_16-53-40_332_large.jpg" style="width: 100%; height: auto;">         </a>         <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">18.03 16:53<br>15s, 16.12 MB</span>     </div></div>

Was mir aktuell nicht gefällt:
Wenn ich auf ein Bild drücke wird das Video runtergeladen (http Link zu einer MkV)

Was ich gerne hätte:
Beim drücken auf ein Bild ein "Mediaplayer" mit dem Video auf geht und ich die Datei im Browser ansehen kann.

Kann ich sowas in vis umsetzen, indem ich die Links in meinem Code modifiziere?

[OliverIO]

@david-g

du kannst mal das video tag ausprobieren
https://developer.mozilla.org/de/docs/Web/HTML/Element/video

allerdings bin ich mir unsicher, ob der browser nativ mp4 abspielen kann. das musst du ausprobieren.
die videos müssen auch über http abrufbar sein, dazu muss der iobroker webserver diese dateien kennen

alternativ auch über eine extra javascript bibliothek gibt es auch sowas
https://videojs.com/
extra bibliotheken hat in vis auch so seine unwägbarkeiten

[David G.]

@oliverio

Habe eben auch noch was getestet.
Einfach als html gespeichert und im Browser geöffnet klappt das ganz gut.

<img src="http://192.168.99.84/path/to/image.jpg" 
     onclick="openVideoPopup()" 
     style="cursor:pointer; width:150px; height:auto;">

<div id="videoPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); 
     width:80%; height:80%; background:white; padding:10px; box-shadow:0 0 10px rgba(0,0,0,0.5); z-index:1000;">
    <span onclick="closeVideoPopup()" style="cursor:pointer; float:right; font-size:20px;">✖</span>
    <video id="popupVideo" width="100%" height="100%" controls>
        <source src="http://192.168.99.84:8090/streamFile.cgi?oid=8&ot=2&fn=8_2025-03-18_07-39-33_003.mkv" type="video/mp4">
        Dein Browser unterstützt dieses Videoformat nicht.
    </video>
</div>

<script>
    function openVideoPopup() {
        document.getElementById("videoPopup").style.display = "block";
        document.getElementById("popupVideo").play();
    }
    function closeVideoPopup() {
        var video = document.getElementById("popupVideo");
        video.pause();
        video.currentTime = 0;
        document.getElementById("videoPopup").style.display = "none";
    }
</script>

Muss jetzt erst mal schauen ob ich meine Tabelle in vis bekomme. Hab grad nur mein Smartphone, da ist vis ja kaum zu bedienen ^^.
Werde denke morgen weiter testen müssen...
Wenn das geht hoffe ich hoffe meinen Link evtl damit ersetzen zu können.

Vermutlich mache ich alles mit dem html widget?

[OliverIO]

@david-g sagte in Vis2 Mediaplayer:

Vermutlich mache ich alles mit dem html widget?

ja
dort hast du auch die flexibilität zwischen statischem html und dein dynamischen html, welches dann durch dein blockly in ein datenpunkt geschrieben wird. im html kannst du das dann durch {name des datenpunkts} einfach irgendwo im html platzieren

teste das aber dringend auch auf dem endgerät auf dem nacher das video abgespielt werden soll.
das da mkv oder mp4 abgespielt wird ist dann eine sache vom betriebssystem. browser sind nur verpflichtet lizenzfreie formate abspielen zu können, alle anderen dekoder können vom betriebssystem kommen (oder auch nicht)

[ExMatador]

@david-g
Hi,
ich verwende sowohl das audio als auch das Video-tag in einer kompletten html-Seite, dazu gehören auch die Controls wie play, mute, volume, forward/rewind und trackposition.
Es können mp4-Files angespielt werden, aber keine mkv.
Die Videos, die ja local vom Browser abgespielt werden, müssen via http erreichbar sein - mache ich über einen lokalen IIS.
Ich übergebe von einem vis-Dialog lediglich eine json-Liste von videos, die abgespielt werden sollen.
Klappt aber ziemlich gut, mittlerweile kam ich auch Radiosender abspielen.
Es fehlt mir noch eine Visualisierung der Frequenzen, vermutlich über das Mikrofon. Scheint mir recht schwierig zu sein.

Gruß ExMatador