Tulskie: Einen laufenden Videostream per Mausklick auf eine andere Seite umleiten.

problematische Seite

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?

verkleinerte Vorschau des Livestreams

akzeptierte Antworten

  1. problematische Seite

    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"});
    
    1. problematische Seite

      @@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

      --
      „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
      — Joachim Gauck über Impfgegner
      1. problematische Seite

        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...

        1. problematische Seite

          @@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

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
          1. problematische Seite

            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...

        2. 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)

          1. 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

            --
            The taste of love: The more you get, the more you want
            (aus The Lightning Seeds: Sense)
            1. 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...

              1. @@klawischnigg

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

                Damals wie heute …

                😷 LLAP

                --
                „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
                — Joachim Gauck über Impfgegner
                1. 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...

  2. problematische Seite

    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?

    verkleinerte Vorschau des Livestreams

    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:

    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:

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

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      @@Matthias Scharwies

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

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

      😷 LLAP

      --
      „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
      — Joachim Gauck über Impfgegner
  3. problematische Seite

    @@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?

    verkleinerte Vorschau des Livestreams

    Ä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

    --
    „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
    — Joachim Gauck über Impfgegner
    1. problematische Seite

      @@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

      1. problematische Seite

        @@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

        --
        „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
        — Joachim Gauck über Impfgegner
      2. problematische Seite

        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;}
        
        1. problematische Seite

          @@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

          --
          „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
          — Joachim Gauck über Impfgegner
    2. problematische Seite

      @@ 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