Bild soll erst beim klick laden

Det20 · 13 September 2017, 16:42:21

Hallo,

ich möchte ein Bild anzeigen und beim Klick darauf einen vergrößerten Livestream.


<li data-row="5" data-col="2" data-sizex="5" data-sizey="3">
  <div data-type="popup" data-height="500" data-width="660px">
    <div data-type="image" data-url="http://.../vorschau.jpg" data-size="100%" data-refresh=60></div>
      <div class="dialog">
        <div data-type="image" data-url="http://.../livestream" data-size="200%"></div>
      </div>
  </div>
</li>

Das Problem ist nun, das der Livestream, der eigentlich erst nach einem Click geladen und gezeigt werden soll, bereits beim laden der Seite geöffnet wird. Im Hintergrund läuft also permanent eine HTTP Verbindung, die Megabyte-Weise Daten schaufelt. Wie kann ich das nun so ändern, dass "livestream" wirklich erst nach einem Click geladen wird?

tomster · 11 Oktober 2017, 14:39:48

Meines Wissens geht das derzeit nicht, da das popup ja nicht von der geladenen Seite verschwindet, sondern nur auf "1 Pixel" verkleinert wird.

Ich habe mir aber neulich genau die gleiche Frage gestellt. Gerade wenn man einen Kamerastream (Türkamera, etc.) im popup hat, ist das ziemliche "Bandbreitenverschwendung". Noch dazu z.B. mein RasPi - auch als V3 - mit einem MJPEG-Stream im Firefox trotz minimiertem popup CPU-seitig ganz schön ausgelastet ist. Chromium, etc. können gleich gar kein MJPEG; den direkten h264-RTSP-Stream leider gar kein Browser nativ anzeigen...

Lösen könnte man das wohl nur, wenn man ein wirkliches popup (sprich: ein neues Fenster) triggern würde. Oder hat jemand eine andere Idee oder Lösung hierzu? setstate?

Eisix · 11 Oktober 2017, 14:59:36

Hallo,

soweit alle sagen geht das wohl nicht.
Ich kann es leider nicht testen aber eine .m3u8 kann ich mit video.js genau so abspielen wie du das möchtest, siehe code.

Hier steht wie man eine rtsp abspielt vielleicht bringt dich das weiter.
http://blog.videojs.com/Video-js-4-2-0-released-RTMP-CSS-designer-and-stability/

Code Auswählen


<!DOCTYPE html>
<html>
<head>
<link href="node_modules/video.js/dist/alt/video-js-cdn.css" rel="stylesheet">
<script src="node_modules/video.js/dist/video.js"></script>
<script src="node_modules/videojs-contrib-hls.js/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<header>Hof</header>
        <video id="my-video" class="video-js" controls preload="auto" width="495" height="294"
                poster="http://x.x.x.x/X/live/snapshot_720.jpg" data-setup="{}">
                <source src="http://x.x.x.x/x/live/files/medium/index.m3u8" type='application/x-mpegURL'>
        </video>
</body>
</html>

Gruß
Eisix

tomster · 11 Oktober 2017, 15:03:56

Servus Eisix,

Danke für den Link. Auch wenn ich darin nur was von RTMP lese, leider nix von RTSP...
Und RTMP benötigt ja auch ein Plug-in wie Flash, etc. oder?

Eisix · 11 Oktober 2017, 15:35:56

@tomster

Ja stimmt ups.
http://videojs.com/getting-started/
Das ist wohl der bessere Einstieg. Wie gesagt keine Ahnung ob das damit geht.
In video.js war wohl mal ein Flash Player ist aber jetzt glaube ich ausgelagert. Da muss man sich einlesen und wirklich mit der Streamquelle rum probieren bis es klappt.
Habe für die Netatmo auch Tage gebraucht.

Gruß
Eisix

tomster · 11 Oktober 2017, 15:53:23

Jetzt werden wir aber ein bissl off-topic; Danke aber dennoch Eisix... Sorry Det20, wollte(n) nicht Deinen Thread kapern!

Die technische Einbindung eines Streams ist das eine Problem (schwer genug). Hier geht es aber um die Möglichkeit das popup, respektive den Stream beim Minimieren tatsächlich "zu beenden", um ihn nicht unnötig am Laufen zu halten. Die Frage (wohl an setstate) wäre, ob man das popup dahingehend modifizieren kann, dass es eine Option a la "target="_blank" gibt? Auch wenn ich noch keine Idee hätte, wie man das dann wieder aus dem parent-frame schliessen kann...

setstate · 11 Oktober 2017, 16:14:48

Das Popup Widget liefert ein entsprechendes Event beim Öffnen bzw. Schließen.

Was damit getriggert wird, hängt vom Usecase ab und muss individuell auf der Seite als <script> implementiert werden.
So etwa:

Code Auswählen


$('#mypopup').on('fadein', function () {
                    myPlayer.play();
                });

$('#mypopup').on('fadeout', function () {
                    myPlayer.stop();
                });

Det20 · 11 Oktober 2017, 16:59:26

Ich habe es nun anders gelöst, also ohne Stream im Popup

tomster · 12 Oktober 2017, 09:38:03

Servus Det20,

magst uns auch wissen lassen, wie genau Du das gelöst hast?

@setstate

Meine Unbeleckheit in Sachen JavaScript/jquery Mal als Entschuldigungsversuch vorgeschoben:
In Deinem Beispiel gehst Du doch davon aus, dass der Stream über ein Plugin (z.B. video.js) eingebunden ist. Ich möchte jedoch einen per <img src> eingebundenen MJPEG-Stream verwenden. Da kann ich m.E. nix starten oder stoppen, sondern nur das PopUp-Fenster "hart" öffnen/beenden; sprich: die die function müsste in etwa so aussehen (nur von der Logik, nicht als tatsächlicher Code):

Code Auswählen


$('#mypopup').on('fadein', function () {
                    new_window.open();
                });
('#mypopup').on('fadeout', function () {
                    new_window.close();
                });
})

Ist das verständlich geschrieben?

setstate · 12 Oktober 2017, 10:20:33

Okay, dann braucht man aber kein Popup-Widget. Dafür reicht Plain Html - Stichworte: Image <image>, Link <a>, target="..."

tomster · 12 Oktober 2017, 10:44:46

So ganz ohne Javascript wird's aber nicht gehen...
Das Popup sollte ja ohne border/Statusbar angezeigt werden (also genauso wie Dein popup). Geht das überhaupt?

Ulm32b · 12 Oktober 2017, 23:59:05

Vielleicht noch ein anderer Lösungsbeitrag zu diesem Thema:
Mit

Code Auswählen

<div data-type="switch" data-device="Video_ein_aus"></div>
<div data-type="image" data-hide="Video_ein_aus:STATE" data-hide-on="off" data-url="http://192.168.x.x:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=13&-usr=yyyyyy&-pwd=zzzzzzz"></div>

kann man die Darstellung des Videos ein- und ausschalten. Was ich nicht durchschaue: Wird damit der Stream unterbrochen oder nur ausgeblendet?

tomster · 13 Oktober 2017, 10:50:43

Die Idee ist zwar gut, aber die Elemente werden mit der hide-class leider nur ausgeblendet. Der Stream läuft dann im Hintergrund weiter.

--edit--

Aber vielleicht könnte man die gewünschte Funktion hinbekommen, wenn man Deine Idee in Richtung jquery weiterspinnt...
Wenn man es schaffen würde mit jquery z.B. ein src-tag beim fadeout auf "leer" zu ändern, dann müsste der Stream doch stoppen, oder?
Ich habe meinen Stream über einen iframe eingebunden.
Mal wieder ein symbolischer Code, der (zumindest setstate) sagen soll, wo ich hin denke.

Code Auswählen


$('#mypopup').on('fadein', function () {
  iframe.src = "URL";
}

$('#mypopup').on('fadeout', function () {
  iframe.src = "";
}

octek0815 · 13 Oktober 2017, 11:48:38

Hallo,

ich stand vor dem selben Problem und habe es so gelöst:

Hier der Code für FTIU:

Code Auswählen

<header>IPCAM</header>
<div data-type="popup" id="ipcam" data-height="465px" data-width="665px" data-device="dIPCAMhaustuerURL"
	data-get-on="http://192.*" data-get-off="/fhem/www/tablet/images/IPcamOff.png">
	<div class="myfont175 center" data-type="push" data-off-color="white" data-on-color="white" data-icon="oa-it_camera" data-device="dIPCAMhaustuerURL"
		data-set-on="http://192.168.x.x/cgi-bin/hi3510/snap.cgi?&-getstream-chn=2" data-background-icon=""></div>
	<div class="dialog">
		<header>IPCAM HAUSTÜR</header>
		<div class="top-space" data-type="image" data-device="dIPCAMhaustuerURL" data-width="640" data-height="360"></div>
		<div class="inline top-space" style="color:lightgrey">
			<div data-type="link" class="square"
				data-text-align="center"
				data-width="90" data-height="30"
				data-color="white"
				data-background-color="gray"
				onclick="$('.dialog-close').trigger('click');">SCHLIEßEN</div>
		</div>
	</div>
</div>

Hier die Standard Definition des Dummys in FHEM:

Code Auswählen

defmod dIPCAMhaustuerURL dummy
setstate dIPCAMhaustuerURL /fhem/www/tablet/images/IPcamOff.png

Und hier die Definition des Notifys in FHEM:

Code Auswählen

defmod nSetIPCAMhaustuerPopupToClosedTimer notify dIPCAMhaustuerURL:http://10.20.8.231/c.* define atTemporarydIPCAMhaustuerURL at +00:01:00 set dIPCAMhaustuerURL /fhem/www/tablet/images/IPcamOff.png

Das funktionier hervorragend so.
IPcamOff.png ist einfach ein Dummy PNG ein Pixel groß.

Bei Fragen melden!

Grüße
Olli

PS: Das kannst du dann auch noch schön mit einem Klingelsensor "Triggern"...

tomster · 13 Oktober 2017, 14:25:19

@octek0815

Super, octek0815! Das ist quasi das Gleiche, wie mein oben geschilderter Ansatz, nur innerhalb von FHEM.
Funktioniert einwandfrei! Danke dafür!