Ankündigung

Einklappen
Keine Ankündigung bisher.

Video pausieren mittels Klick und/oder Leertaste. Chrome ok, FF nicht.

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Video pausieren mittels Klick und/oder Leertaste. Chrome ok, FF nicht.

    Kann mir jemand sagen, warum folgendes im aktuellen Chrome (Win 10) funktioniert und im FF nicht:

    https://jsfiddle.net/v89dgb0x/1/

    Wenn man zuerst auf Play klickt, kann man im Chrome mit Mausklick aufs Video oder Leertaste das Video pausieren und fortfahren... auch abwechselnd. Im FF wird nur der Mausklick genommen, komischer weise die Leertaste nicht. Der Event wird aber laut Console mit 32 geworfen und es gibt keinen Fehler.

    Der vollständigkeit halber: Es geht um ein Umsetzungsdetail zu diesem Thread hier, als eigentlich nicht wichtige Seiteninfo.

    Danke!
    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN


  • #2
    Es funktioniert nur bei jsfiddle nicht.
    Auf anderen Seiten funktioniert es.
    Bsp: https://jsbin.com/papuhuluri/edit?html,js,output

    Keine Ahnung warum

    //edit
    Auf der oben genannten Seite funkt jetzt mit FF aber nicht mit Chrome.

    Kommentar


    • #3
      Leider funktioniert bei mir am Rechner weder Fiddle noch die andere Quelle, könntest Du die wenigen Zeilen sourcen posten ?

      Kommentar


      • #4
        Ich habe mir mal eine Seite erstellt und das getestet. Der effekt das es in FF nicht geht kann ich auch bestätigen.
        Habedas play und pause mal in einer Function gemacht und die wird von keypress und click aufgerufen und trotzdem geht es in FF nicht. Sehr merkwürdiges verhalten
        Mein soforthilfe Forum und Chat

        Kommentar


        • #5
          Ist der Fokus auf dem Video? (document.activeElement)? Benutzt du plain <video> oder irgendeinen Videoplayer a la videojs?
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          Blog - CoverflowJS

          Kommentar


          • #6
            Aktuell nutze ich zum Test das hier wo ich der Verhalten nachstellen kann:
            PHP-Code:
            <!DOCTYPE html>
            <
            html lang="de">
              <
            head>
                <
            meta charset="utf-8">
                <
            meta name="viewport" content="width=device-width, initial-scale=1.0">
                <
            title>Titel</title>
                <
            script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                <script>
                    // Play/Pause Leertaste
                    $(window).keypress(function(e) {
                        var video = document.getElementById('vid');
                        console.log(e.which);
                        if (e.which == 32) {
                            if (video.paused)
                                video.play();
                            else
                                video.pause();
                        }
                    });

                    // Play/Pause Mausklick
                    $(document).on('click', '#vid', function(e) {
                        var video = $(this).get(0);
                        if (video.paused) {
                            video.pause();
                        } else {
                            video.play();
                        }
                        return false;
                    });
                </script>

              </head>
              <body>

                <video id="vid" controls>
                  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
                </video>

              </body>
            </html> 
            Zuerst hat HTML den Focus laut Debug Ausgabe, jedoch beim zweiten mal eigentlich das Video Element. Hier in der Arbeit habe ich eine leicht ältere Version des FF, hier geht es teilweise aber meistens nicht. Sehr intereessant das muss ich mir weiter ansehen.

            EDIT:

            Wenn man von Beginn an nur die Leertaste verwendet funktioniert es hier, jedoch sobald man einmal mit der Maus klickt dann hat die Leertaste keine Funktion mehr. Warscheinlich "spiessen" sich die beiden Codes irgendwo, ich erkenne es leider auf Anhieb leider nicht, mein JS ist echt nicht gut :-/ Ich bleib weiter dran.


            EDIT 2:

            Der Klick Handler feuert im FF nicht. Der klick wird von dem Player scheinbar "nativ" gezogen. Das kann man hier gut sehen, es wird immer nur ausgegeben, wenn man Leertaste drückt, aber nie beim Klicken. Der aktuelle Status des Videos wird aber erkannt, jedoch nicht "umgestellt". Das ist dann nächster Punkt den ich mir anschaue.

            Aktueller Code:

            PHP-Code:
            <!DOCTYPE html>
            <
            html lang="de">
              <
            head>
                <
            meta charset="utf-8">
                <
            meta name="viewport" content="width=device-width, initial-scale=1.0">
                <
            title>Titel</title>
                <
            script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

                <script>
                    function PlayOrPause(video) {
                        console.log(video.paused);
                        if (video.paused) {
                            video.play();
                        } else {
                            video.pause();
                        }
                    }

                    // Play/Pause Leertaste
                    $(document).keypress(function(e) {
                        var video = document.getElementById('vid');
                        console.log(e.which);
                        if (e.which == 32) {
                            PlayOrPause(video);
                        }
                    });

                    // Play/Pause Mausklick
                    $("#vid").click(function() {
                        var video = $(this).get(0);
                        PlayOrPause(video);
                        // return false;
                    });
                </script>
              </head>

              <body>

                <video id="vid" controls>
                  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
                </video>

              </body>
            </html> 
            Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
            PHP.de Wissenssammlung | Kein Support per PN

            Kommentar


            • #7
              die "Controls" fressen den window.click()
              HTML-Code:
              <!DOCTYPE html>
              <html lang="de">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>Titel</title>
                  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                </head>
                <body>
                  <video id="vid" controls>
                    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
                  </video>
                  <script>
                  // Play/Pause Leertaste
                  var video = document.getElementById('vid');
                  video.controls=false;
                      $(window).keypress(function(e) {
                          console.log(e.which)
                          if (e.which == 32) {
                              if (video.paused == true)
                              video.play();
                              else
                              video.pause();
                          }
                      });
                      // Play/Pause Mausklick
                      $(document).on('click', '#vid', function(e) {
                          var video = $(this).get(0);
                          if (video.paused === false) {
                              video.pause();
                          } else {
                              video.play();
                          }
                          return false;
                      });
                  </script>
                </body>
              </html>  

              Kommentar


              • #8
                die "Controls" fressen den window.click()
                Scheinbar nur im FF.

                Danke, hatte eben danach gegoogelt, wie ich das verhindern kann weil es mir auch aufgefallen war, das im Log immer nur die Space kam, dh ich deshalb im JS den onclick nicht getriggert bekam.


                PHP-Code:
                   video.controls=false
                Was kann ich tun, wenn ich die Controls aber gerne hätte? Gibts da ev. eine Möglichkeit? Ich suche sonstmal danach.
                Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                PHP.de Wissenssammlung | Kein Support per PN

                Kommentar


                • #9
                  Da gibts scheinbar sogar Bug Meldungen für den FF in die Richtung:

                  https://bugzilla.mozilla.org/show_bug.cgi?id=693014

                  https://bugzilla.mozilla.org/show_bug.cgi?id=1181055

                  Dann bleib ich hier halt beim Chrome.
                  Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                  PHP.de Wissenssammlung | Kein Support per PN

                  Kommentar


                  • #10
                    wenn ich nicht mit document.ready arbeite ist es die Reihenfolge und controls.

                    Ich habe momentan keine Zeit mich damit intensiv zu befassen, tippe aber darauf, dass ich dem Element mit blur den Focus entziehe und auf jeden Fall mit "async function" und "try await" arbeiten muss, weil es sich um ein Timing Problem handelt.

                    Kommentar


                    • #11
                      ok danke vorerst mal. Was ich aber dennoch seltsam finde.. Laut Debugausgabe "kennt" JS immer den paused Status korrekt wenn ich die Leertaste drücke (console.log()), aber er setzt den nicht wieder auf den gerade nicht aktiven. Kommt auch kein Fehler etc.. Das finde ich schon schräg. Ich sag mal so wenn der Mausklick "nativ" funktioniert, und die Spacebar per JS ist mir das so gesehen ja egal.

                      Genau dieser Code gibt mir beim hit auf die Leertaste immer den korrekten Pause-Status aus. (den ich mit der Maus immer gerade geklickt hab). Aber es ändert den State nicht. Muss es da nicht noch einen anderen Grund geben.. Wie gesagt Fehlermeldung gibt es keine aber ev. noch ein logischer Fehler im Code. Ich hab das Play/Pause mal in eine eigene Funktion ausgelagert.

                      IMG_101913.png

                      PHP-Code:
                      <!DOCTYPE html>
                      <
                      html lang="de">
                        <
                      head>
                          <
                      meta charset="utf-8">
                          <
                      meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <
                      title>Titel</title>
                          <
                      script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

                          <script>
                              function PlayOrPause(video) {
                                  console.log(video.paused);
                                  if (video.paused) {
                                      video.play();
                                  } else {
                                      video.pause();
                                  }
                              }

                              // Play/Pause Leertaste
                              $(document).keypress(function(e) {
                                  var video = document.getElementById('vid');
                                  console.log(e.which);
                                  if (e.which == 32) {
                                      PlayOrPause(video);
                                  }
                              });

                              // Play/Pause Mausklick
                              $("#vid").click(function(e) {
                                  var video = $(this).get(0);
                                  PlayOrPause(video);
                              });
                          </script>
                        </head>

                        <body>

                          <video id="vid" controls>
                            <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
                          </video>

                        </body>
                      </html> 
                      Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                      PHP.de Wissenssammlung | Kein Support per PN

                      Kommentar


                      • #12
                        Ja schau.. Wenn ich es in VanillaJS mache, dann funktioniert es (fast).

                        Es muss nur per Mausklick mal gestartet werden (da greift Space noch nicht) aber dann kann man mit Maus und/oder Tastatur wie man will wechseln und es läuft. Mal schauen ev. bekomm ich den ersten Klick auch noch alternativ hin. Noch hab ich einen JS Fehler drinnen, den schau ich dann gleich noch an.

                        Aktuelles JS:
                        PHP-Code:
                        <!DOCTYPE html>
                        <
                        html lang="de">
                          <
                        head>
                            <
                        meta charset="utf-8">
                            <
                        meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <
                        title>Titel</title>
                            <
                        script>

                                function 
                        PlayOrPause(v) {
                                    
                        console.log(v.paused);
                                    if (
                        v.paused) {
                                        
                        v.play();
                                    } else {
                                        
                        v.pause();
                                    }
                                }

                                
                        document.getElementById('vid').addEventListener("click", function() {
                                    
                        PlayOrPause(document.getElementById('vid'));
                                });

                                
                        document.getElementById('vid').addEventListener("keypress", function(e) {
                                    
                        console.log(e.which);
                                    if (
                        e.which == 32) {
                                        
                        PlayOrPause(document.getElementById('vid'));
                                    }
                                });
                            
                        </script>
                          </head>
                          <body>
                            <video id="vid" controls>
                              <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
                            </video>
                          </body>
                        </html> 
                        Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                        PHP.de Wissenssammlung | Kein Support per PN

                        Kommentar


                        • #13
                          Ja alter Browser kein mp4 codec

                          dein Problem hab ich allerdings auch, bei mir ändert nicht mal autoplay etwas.

                          @rudygotya nett mal wieder was von Dir zu lesen

                          Kommentar


                          • #14
                            Also der Code in #12 wäre es schon fast. Wenn ...

                            1. man gleich auch mit Space losgehen könnte und ich

                            2. den Fehler noch rausbekomme..
                            Code:
                            TypeError: document.getElementById(...) is null[Weitere Informationen] test_vanilla.html:18:9
                            18:
                            PHP-Code:
                            document.getElementById('vid').onclick = function() { 
                            Das hängt wohl mit dem DOMReady zusammen..

                            Jetzt aber mal keine Zeit mehr dafür .. leider.. Schaue dann später weiter.
                            Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                            PHP.de Wissenssammlung | Kein Support per PN

                            Kommentar


                            • #15
                              Hier mal die Lösung, die ich gefunden habe und bei mir geht.
                              Habe ein anderes Video verwendet, mit WEBm Codec der überall geht.
                              Dafür geht mal wieder was anderes nicht, nämlich die Anzeige von curentTime bei space. Mit Klick geht es im FF. CHrome kein Problem, geht beides.
                              HTML-Code:
                              ...
                              <video id="vid" controls>
                                  <source src="http://dl3.webmfiles.org/elephants-dream.webm" type="video/webm">
                              </video>
                              <p> paused at: <var id="time"></var></p>
                              ...
                              <script>
                              var video = document.getElementById('vid');
                              var time = document.getElementById('time');
                              
                              vid.addEventListener('click', function(){
                                  if (video.paused) {
                                      video.play();
                                  }else{
                                      video.pause();
                                      time.textContent = video.currentTime;
                                  }
                              });
                              
                              document.onkeypress = function(e){
                                  if((e || window.event).keyCode === 32){
                                      if (video.paused){
                                          video.play();
                                      }else{
                                          console.log(video.currentTime);
                                          video.pause();
                                          time.textContent = video.currentTime;
                                      }
                                  }
                              };
                              </script>
                              EDIT:
                              Es liegt übrigens nicht an Javascript sondern daran, dass die Browser mit den events unterschiedlich umgehen.
                              Man kann sich das in der Console ansehen wenn man sich den target anzeigen lösst.

                              Kommentar

                              Lädt...
                              X