Einen laufenden Videostream per Mausklick auf eine andere Seite umleiten.

[Tulskie]

Hallo zusammen, ich bin kurz vor der Vollendung meiner Website, hab aber noch ein Problem wozu ich bisher keine Lösung finden konnte. Auf der Hauptseite werden mehrere Live-Streams in verkleinerter Version als Vorschau gezeigt. Nun möchte ich mit einem Klick auf die Lievstream Vorschau, auf die Seite wechseln auf der man den Stream in voller Größe sehen kann. Kann mir dazu jemand weiterhelfen?

[klawischnigg]

Hi there,

Nun möchte ich mit einem Klick auf die Lievstream Vorschau, auf die Seite wechseln auf der man den Stream in voller Größe sehen kann. Kann mir dazu jemand weiterhelfen?

Du kannst auf das video-Element wie auf jedes andere Element einen Eventhandler legen, der bei "click" auslöst. Das sieht dann in etwas so aus:

document.getElementById(id_von_deinem_element).addEventListener('click',function(){location.href="http://link_zu_deinem_stream_in_voller_groesse"});

[Gunnar Bittersmann]

@@klawischnigg

Du kannst auf das video-Element wie auf jedes andere Element einen Eventhandler legen, der bei "click" auslöst.

Das kann man machen; ist dann halt Kacke.

click-Events lösen bei Tastaturbedienung nur bei einigen interaktiven Elementen wie a und button aus. video gehört nicht dazu, siehe schlechtes Beispiel. (Der ⏯-Button ist nur zum Vergleich da.)

Und „wie auf jedes andere Element“ ist völlig falsch. Merke: Niemals nicht-interaktive Elemente als Target von Click-Events verwenden! (Wie oft muss man das hier noch sagen?)

Das video-Element ist allerdings in der Tab-Folge (d.h. es kann per Tastatur angesteuert werden) und reagiert auf Key-Events. Mann könnte also bei Leertaste und Return (Enter) etwas ausführen: Beispiel

Vermutlich sinnvoller wäre es aber, das video in ein button-Element zu packen wie im nächsten Beispiel.

---

Wenn ich es recht in Erinnerung habe, sind’s bei @Tulskie keine video-, sondern img-Elemente.

😷 LLAP

[klawischnigg]

Hi there,

Du kannst auf das video-Element wie auf jedes andere Element einen Eventhandler legen, der bei "click" auslöst.

Das kann man machen; ist dann halt Kacke.

click-Events lösen bei Tastaturbedienung nur bei einigen interaktiven Elementen wie a und button aus. video gehört nicht dazu, siehe schlechtes Beispiel. (Der ⏯-Button ist nur zum Vergleich da.)

Und „wie auf jedes andere Element“ ist völlig falsch. Merke: Niemals nicht-interaktive Elemente als Target von Click-Events verwenden! (Wie oft muss man das hier noch sagen?)

Das kannst Du in eine Plastiktüte sprechen und die dann vor die Türe stellen. Der OP wollte wissen, wie man mit einem Klick eine Seite aufruft, nicht mit einem Tastendruck, einer Geste, oder mit einer bestimmten Buchstabenkombination. Das hab ich ihm erklärt; im Gegensatz zu Dir hab ich da kein Sendungsbewußtsein. Du willst da ständig Probleme lösen, die es ohne letztgenanntes überhaupt nicht gibt...

[Gunnar Bittersmann]

@@klawischnigg

Der OP wollte wissen, wie man mit einem Klick eine Seite aufruft, nicht mit einem Tastendruck, einer Geste, oder mit einer bestimmten Buchstabenkombination.

Falsch. Der OP wollte nicht wissen, wie er seine Seine für etliche Nutzer unbedienbar macht.

Wenn jemand „Klick“ sagt und Nicht-Mausbediener nicht im Blick hat, dann liegt es in der Verantwortung der Antwortenden, den Blick zu erweitern.

Das hab ich ihm erklärt; im Gegensatz zu Dir hab ich da kein Sendungsbewußtsein.

Du willst damit sagen, du wärst schon zu alt, um deine Scheuklappen noch abzulegen‽

😷 LLAP

[klawischnigg]

Hi there,

Der OP wollte wissen, wie man mit einem Klick eine Seite aufruft, nicht mit einem Tastendruck, einer Geste, oder mit einer bestimmten Buchstabenkombination.

Falsch. Der OP wollte nicht wissen, wie er seine Seine für etliche Nutzer unbedienbar macht.

Hat er nicht geschrieben. Ich betreibe keine Motivationsforschung, wenn ich auf ein technisches Problem antworte.

Wenn jemand „Klick“ sagt und Nicht-Mausbediener nicht im Blick hat, dann liegt es in der Verantwortung der Antwortenden, den Blick zu erweitern.

Solange wir nicht wissen, was er vorhat, kann ich nur auf das reagieren, was er schreibt und offensichtlich will. Vielleicht mag er ja auch keine "Nicht-Mausbediener", was weiß ich; das wär' zwar kein schöner Zug von ihm, aber erstens wäre auch das sein gutes Recht und zweitens vergebe ich da keine Haltungsnoten.

Das hab ich ihm erklärt; im Gegensatz zu Dir hab ich da kein Sendungsbewußtsein.

Du willst damit sagen, du wärst schon zu alt, um deine Scheuklappen noch abzulegen‽

Wenn Du das so interpretieren willst soll's mir recht sein. Ich jedenfalls halte es eher für eine Tugend, andern nicht mit der Beantwortung von Fragen auf die Nerven zu gehen, die sie gar nicht gestellt haben...

[Raketenwilli]

Der OP wollte wissen, wie man mit einem Klick eine Seite aufruft, nicht mit einem Tastendruck, einer Geste, oder mit einer bestimmten Buchstabenkombination.

Nicht um Dir weh zu tun oder Gunnar zu bauchpinseln: - sondern um es allgemeiner auszudrücken:

Es ist doch schon richtig, den Fragestellenden zu „sagen“, wenn sie mit Ihrem gezeigten (oder vermuteten) Ansatz auf dem Holzweg sind und etwas wie „Fragen, die vorhersehbar nullkommmkaumeine Sekunde später auftauchen werden“, gleich mit zu lösen - oder?

Jedenfalls ist es in meinen Augen nicht besonders zielführend oder hilfreich, nur das gezeigte Problem „irgendwie schnell zu lösen“ und hinzunehmen, dass die Fragestellenden später ihr Zeug wieder umfangreich ändern müssen.

Und: „Ja! Dazu muss oder sollte man auch die Glaskugel bemühen.“ (Beispiel) gilt ebenso „Ja! Da sind auch Irrtümer möglich. “ (Beispiel)

[Der Martin]

Hallo,

Es ist doch schon richtig, den Fragestellenden zu „sagen“, wenn sie mit Ihrem gezeigten (oder vermuteten) Ansatz auf dem Holzweg sind und etwas wie „Fragen, die vorhersehbar nullkommmkaumeine Sekunde später auftauchen werden“, gleich mit zu lösen - oder?

ja, aber a) der Ton macht die Musik und b) sollte man über die Verhältnismäßigkeit nachdenken. Hier haben sich die Vertreter zweier extremer Positionen getroffen: Gunnar, der nur Lösungen gelten lassen möchte, die hieb- und stichfest und 120% zugänglich sind, und klawischnigg, der's locker sieht und dem Fragenden einfach eine schnelle und pragmatische Lösung anbietet, auch wenn die dann nur das aktuelle, konkrete Detailproblem löst und im Gesamtkonzept nicht mehr punkten kann.

Ja - dazu muss oder sollte man auch die Glaskugel bemühen. Ja - da sind auch Irrtümer möglich.

Natürlich. Deswegen ist es oft sinnvoller, zunächst mal nach den Rahmenbedingungen zu fragen, die der Fragesteller nicht erwähnt hat, weil er/sie nicht im Entferntesten geahnt hat, dass sie relevant sein könnten.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[klawischnigg]

Hi there,

Hier haben sich die Vertreter zweier extremer Positionen getroffen: Gunnar, der nur Lösungen gelten lassen möchte, die hieb- und stichfest und 120% zugänglich sind, und klawischnigg, der's locker sieht und dem Fragenden einfach eine schnelle und pragmatische Lösung anbietet, auch wenn die dann nur das aktuelle, konkrete Detailproblem löst und im Gesamtkonzept nicht mehr punkten kann.

Ich dachte halt, wenn jemand um halb zwölf in der Nacht eine Frage über ein Problemchen stellt, dann ist er einfach an einer "pragmatischen Lösung" interessiert und nicht an einem Kolloqium über die Browserbedienung mit einem Schraubenzieher. Der OP war dann mit der Lösung sichtlich zufrieden, aber offensichtlich hat das ja auch jemanden gestört. Vermutlich hab ich die Intentionen dieses Forums die letzten 20 Jahre immer falsch verstanden...

[Gunnar Bittersmann]

@@klawischnigg

Vermutlich hab ich die Intentionen dieses Forums die letzten 20 Jahre immer falsch verstanden...

Damals wie heute …

😷 LLAP

[klawischnigg]

Hi there,

Vermutlich hab ich die Intentionen dieses Forums die letzten 20 Jahre immer falsch verstanden...

Damals wie heute …

Ok, ich hab's falsch verstanden...

[Matthias Scharwies]

Servus!

Hallo zusammen, ich bin kurz vor der Vollendung meiner Website, hab aber noch ein Problem wozu ich bisher keine Lösung finden konnte. Auf der Hauptseite werden mehrere Live-Streams in verkleinerter Version als Vorschau gezeigt. Nun möchte ich mit einem Klick auf die Lievstream Vorschau, auf die Seite wechseln auf der man den Stream in voller Größe sehen kann.

Die technische Lösung deiner Frage hat dir @klawischnigg gliefert.

Kann mir dazu jemand weiterhelfen?

Ich würde gerne einen anderen Lösungsansatz vorschlagen:

Ich nutze meinen Browser beruflich und privat, habe immer etwa 8-12 Tabs offen. Ich komme auf deine Seite und sehe …

Live-Streams in verkleinerter Version als Vorschau

Ich würde jetzt gerne einen Live-Stream in voller Größe sehen. Dazu klicke ich auf das Vorschau-Bild, das große Video öffnet sich auf Deiner Seite im gleichen Tab und beim Beenden bin ich wieder in der Vorschau zu den anderen Nistkästen im gleichen Tab.

Ich hatte letzte Woche keine Zeit, in deiner letzten Frage (Platzhalter für den Videostream) auf das posterals Vorschaubild hinzuweisen, das du wsl. schon kennst:

• HTML/Tutorials/Multimedia/video#Vorschaubild_mit_poster

Ich würde jetzt einfach dein Video aus dem Elementfluss nehmen und als Overlay über Deine Webseite legen, der Rest der Seite ist mit ::backdrop ausgegraut. Bei Beenden des Streams würde dieses Overlay beendet.

Hier ist ein Beispiel mit einem Bild:

• Fullscreen#Bild_mit_Lightbox-Effekt

PS: Das Video muss nicht den Fullscreen einnehmen - du kannst es ja beliebig formatieren und in der Mitte zentrieren.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Die technische Lösung deiner Frage hat dir @klawischnigg gliefert.

Schade, dass du nicht erkannt hast, dass er das nicht hat.

😷 LLAP

[Gunnar Bittersmann]

@@Tulskie

Auf der Hauptseite werden mehrere Live-Streams in verkleinerter Version als Vorschau gezeigt. Nun möchte ich mit einem Klick auf die Lievstream Vorschau, auf die Seite wechseln auf der man den Stream in voller Größe sehen kann. Kann mir dazu jemand weiterhelfen?

Äm, Links?

<a href="https://pipmatz.de/startseite.html#a1447">
  <span>Meisenhaus 1</span>
  <img src="https://pipmatz.de:1910/" alt=""/>
</a>

„Meisenhaus 1“, „Meisenhaus 2“ usw. sind keine Überschriften. Dafür h3 zu verwenden ist falsch und führt für Nutzer assistiver Technologien zu Problemen, sich auf der Seite zurechzufinden. Mach span draus und style diese.

Das JavaScript (Eventhandler auf den divs) kannst du wieder wegschmeißen. Da hat dir @klawischnigg wohl Quatsch erzählt, ohne sich dein Problem angesehen zu haben.

😷 LLAP

[Tulskie]

@@klawischnigg ,

danke für die schnelle Hilfe. Nach einigen Verständnisproblemen meinerseits, habe ich es nun recht einfach umsetzen können. Was noch wünschenswert wäre, ist das sich der Mauszeiger ändert wenn man über den Video stream kommt. Dann wäre es ersichtlicher das eine Aktion erfolgt. Vielleicht gibt es dafür ja auch eine einfache Lösung.

@@ Gunnar Bittersmann, die Idee ist sicherlich für den einen oder anderen sehr zu empfehlen, ich möchte aber zwingend auf die andere Seite springen da es dort noch weitere Informationen gibt, geben wird. Diese würden ansonsten keinem mehr ins Auge fallen.

Gruß Tulskie

[Gunnar Bittersmann]

@@Tulskie

Was noch wünschenswert wäre, ist das sich der Mauszeiger ändert wenn man über den Video stream kommt. Dann wäre es ersichtlicher das eine Aktion erfolgt. Vielleicht gibt es dafür ja auch eine einfache Lösung.

Ja, Links verwenden. Die Änderung des Mauscursors kommt frei Haus.

die Idee ist sicherlich für den einen oder anderen sehr zu empfehlen, ich möchte aber zwingend auf die andere Seite springen da es dort noch weitere Informationen gibt, geben wird.

Genau das erreichst du mit Links: zwingend auf die andere Seite zu springen.

😷 LLAP

[klawischnigg]

Hi there,

Was noch wünschenswert wäre, ist das sich der Mauszeiger ändert wenn man über den Video stream kommt. Dann wäre es ersichtlicher das eine Aktion erfolgt. Vielleicht gibt es dafür ja auch eine einfache Lösung.

Ja, du mußt in den style-Anweisungen den Cursor ändern, in etwa so:

#id_von_deinem_vorschaubild :hover {cursor:pointer;}

[Gunnar Bittersmann]

@@klawischnigg

Ja, du mußt in den style-Anweisungen den Cursor ändern, in etwa so:

#id_von_deinem_vorschaubild :hover {cursor:pointer;}

Nein, das muss du nicht.

Sicher kann man versuchen, ein einfaches <a href="…"> durch
<span onclick="location.href='…'" style="cursor:pointer" role="link" tabindex="0"> nachzubauen. Nur ist das völliger Unsinn.

Hatte ich schon erwähnt, dass man dann role="link" und tabindex="0" nicht vergessen darf? Was bei <a href="…"> schon implizit dabei ist.

😷 LLAP

[Tulskie]

@@ Gunnar Bittersmann,

„Meisenhaus 1“, „Meisenhaus 2“ usw. sind keine Überschriften. Dafür h3 zu verwenden ist falsch und führt für Nutzer assistiver Technologien zu Problemen, sich auf der Seite zurechzufinden. Mach span draus und style diese.

Da ich das Grundgerüst mit Zeta Producer erstellt habe, dieser h3 ausgegeben hat, habe ich mir darüber keine Gedanken gemacht. Wenn ich es zeitlich noch schaffe bis Sonntag Abend, schau ich mir das nochmal an.

Gruß Tulskie