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

  • #31
    "Mögen" ist gut gesagt, ich kannte das nicht mal JS und ich sind nicht die besten Freunde wenn man es so nennen will. Danke nochmals.

    EDIT:

    Entspreched deinem Beispiel (events binding) geht "natürlich" nun auch folgendes:

    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() {
                (
    vid.paused) ? vid.play() : vid.pause();
            }
            
    document.addEventListener("DOMContentLoaded", function() {
                
    document.addEventListener("keypress", function(e) {
                    if (
    e.which == 32) {
                        
    PlayOrPause();
                    }
                });
                
    vid.addEventListener("keypress", function(e) {
                    if (
    e.which == 32) {
                        
    PlayOrPause();
                    }
                });
                
    document.addEventListener("click", function() {
                    
    PlayOrPause();
                });
            });
        
    </script>
      </head>
      <body>
        <video id="vid" controls>
          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm">
          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.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


    • #32
      ja klar, deswegen setze ich den ScriptBlock immer vor den schließenden Bodytag. Damit ist sichergestellt, dass DOMContent geladen ist und ich auf die id´s zugreifen kann. Das soll aber nicht heißen, dass dann auch alle Bilder Stylesheets etc. geladen sind.

      Kommentar


      • #33
        Zitat von kaminbausatz Beitrag anzeigen
        das mit den arrows magst Du wohl noch nicht so sehr ):
        Die funktionieren nicht im Internet Explorer.

        Wenn man auf modernen Code wert legt, sollte man ohnehin TypeScript o.ä. statt native JavaScript verwenden, zumindest wenn es um Browser-Anwendungen geht.

        Kommentar


        • #34
          Zitat von hellbringer Beitrag anzeigen
          Die funktionieren nicht im Internet Explorer.
          im Netscape Navigator auch nicht.

          Kommentar


          • #35
            Zitat von kaminbausatz Beitrag anzeigen
            im Netscape Navigator auch nicht.
            Internet Explorer wird aber noch verwendet. z.B. bei uns in der Firma mit 10.000 Mitarbeitern ist IE11 als Browser eingerichtet und die Leute können auch nichts anderes installieren.

            Kommentar


            • #36
              Ob das jetzt ein gutes oder ein schlechtes Beispiel ist sei mal dahingestellt.

              TypeScript für diese Geschichte ist wohl etwas überdimensioniert..

              Will ich es auch für den IE haben, wäre Babel nicht die schlechteste Alternative.

              Hierbei wird folgender Code erzeugt, der auch die ewig Gestrigen teilhaben lässt.

              HTML-Code:
              'use strict';
              
              function _newArrowCheck(innerThis, boundThis) { if (innerThis !== boundThis) { throw new TypeError("Cannot instantiate an arrow function"); } }
              
              var PlayOrPause = function () {
                      _newArrowCheck(undefined, undefined);
              
                      return vid.paused ? vid.play() : vid.pause();
              }.bind(undefined);
              document.addEventListener('keypress', function (e) {
                      _newArrowCheck(undefined, undefined);
              
                      return e.which == 32 && PlayOrPause();
              }.bind(undefined));
              vid.addEventListener('keypress', function (e) {
                      _newArrowCheck(undefined, undefined);
              
                      return e.which == 32 && PlayOrPause();
              }.bind(undefined));
              document.addEventListener('click', function () {
                      _newArrowCheck(undefined, undefined);
              
                      return PlayOrPause();
              }.bind(undefined));

              Kommentar


              • #37
                Zitat von kaminbausatz Beitrag anzeigen
                Ob das jetzt ein gutes oder ein schlechtes Beispiel ist sei mal dahingestellt.
                Das ist kein gutes Beispiel, sondern die Realität.

                Zitat von kaminbausatz Beitrag anzeigen
                TypeScript für diese Geschichte ist wohl etwas überdimensioniert..

                Will ich es auch für den IE haben, wäre Babel nicht die schlechteste Alternative.
                Und wo ist jetzt der große Unterschied, ob man den TypeScript- oder den Babel-Compiler verwendet? Ist beides gleich viel "überdimensioniert".

                Der TypeScript-Compiler generiert daraus:
                Code:
                var PlayOrPause = function () { return vid.paused ? vid.play() : vid.pause(); };
                document.addEventListener('keypress', function (e) { return (e.which == 32) && PlayOrPause(); });
                vid.addEventListener('keypress', function (e) { return (e.which == 32) && PlayOrPause(); });
                document.addEventListener('click', function () { return PlayOrPause(); });

                Kommentar


                • #38
                  Babel exakt gleich, wenn ich lediglich Preset ES2015 wähle.

                  Im Grunde ist es kein Unterschied. Wenn ich IE Kompatibilität haben will schmeiße ich es kurz in Babel, sehe aber weiterhin keine Notwendigkeit 4 Zeilen in TypeScript zu formulieren. Bei größeren Projekten handhabe ich das anders.

                  Kommentar


                  • #39
                    Zitat von kaminbausatz Beitrag anzeigen
                    sehe aber weiterhin keine Notwendigkeit 4 Zeilen in TypeScript zu formulieren.
                    Was heißt "in TypeScript formulieren"? Ich habe deinen Code 1:1 in den TypeScript-Compiler geworfen. Da muss nix formuliert werden.

                    Kommentar


                    • #40
                      Das ist ein Missverständnis, wollte damit sagen, dass ich das in Notepad++ schnell hingerotzt habe. Ohen IDE Compiler etc.

                      Kommentar


                      • #41
                        Funktioniert nun zu Hause auch im Chrome, danke euch alle nochmals, vor allem kaminbausatz für die schlussendlich funktionierende Lösung.
                        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


                        • #42
                          Kurzes Update noch.. Ich habe das JS mittlerweile etwas verfeinert, zentraler EventHandler und nun kann man auch mittels ESC das Video pausieren und mit den Pfeil rechts und link jeweils 5 Sekunden "seeken". Funktioniert in beiden Browsern und wirft keinen Fehler, sollte somit also im Grunde passen

                          PHP-Code:
                          var PlayOrPause = function PlayOrPause() {
                              return 
                          vid.paused vid.play() : vid.pause();
                          };

                          var 
                          seekPos = function seekPos(i) {
                              return 
                          vid.currentTime += i;
                          };

                          var 
                          eventListener = function eventListener(e) {
                              
                          // console.log(e.keyCode);
                              
                          switch(e.keyCode) {
                                  case 
                          27:
                                      
                          // ESC
                                      
                          return vid.pause();
                                      break;
                                  case 
                          32:
                                      
                          // Space
                                      
                          return PlayOrPause();
                                      break;
                                  case 
                          37:
                                      
                          // leftArrow
                                      
                          return seekPos(-5);
                                      break;
                                  case 
                          39:
                                      
                          // rightArrow
                                      
                          return seekPos(5);
                                      break;
                              }
                              return 
                          null;
                          };


                          document.addEventListener("DOMContentLoaded", function () {

                              
                          document.addEventListener('keydown', function(e) { eventListener(e) } );
                              
                          vid.addEventListener('keydown', function(e) { eventListener(e) } );

                              
                          vid.addEventListener('click', function () {
                                  return 
                          PlayOrPause();
                              });

                          }); 
                          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


                          • #43
                            Vorher hattest du e.which jetzt verwendest du e.keyCode, hat das einen besonderen Grund?

                            Im Grunde sind ja beide Methoden als deprecated eingestuft.
                            Beides sollte für neue Webseiten nicht mehr verwendet werden.
                            Stattdessen gibt es https://developer.mozilla.org/en-US/...oardEvent/code

                            Kommentar


                            • #44
                              Zitat von protestix Beitrag anzeigen
                              Stattdessen gibt es ..
                              Funkioniert jetzt damit auch.. hatte ich vorher wohl was falsch gemacht. Danke.

                              PHP-Code:
                              var PlayOrPause = function PlayOrPause() {
                                  return 
                              vid.paused vid.play() : vid.pause();
                              };

                              var 
                              seekPos = function seekPos(i) {
                                  return 
                              vid.currentTime += i;
                              };

                              var 
                              eventHandler = function eventHandler(e) {
                                  
                              //console.log(e.code);
                                  
                              switch(e.code) {
                                      case 
                              'Escape':
                                          return 
                              vid.pause();
                                          break;
                                      case 
                              'Space':
                                          return 
                              PlayOrPause();
                                          break;
                                      case 
                              'ArrowLeft':
                                          return 
                              seekPos(-5);
                                          break;
                                      case 
                              'ArrowRight':
                                          return 
                              seekPos(5);
                                          break;
                                  }
                                  return 
                              null;
                              };

                              document.addEventListener("DOMContentLoaded", function () {

                                  
                              document.addEventListener('keydown', function(e) { eventHandler(e) } );
                                  
                              vid.addEventListener('keydown', function(e) { eventHandler(e) } );

                                  
                              vid.addEventListener('click', function () {
                                      return 
                              PlayOrPause();
                                  });

                              }); 
                              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


                              • #45
                                MOD: Habe die restlichen Beiträge wo es um die Ladedauer etc. ging in das ursprüngliche Thema geschoben. https://www.php.de/forum/php-de-inte...eien-erstellen
                                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

                                Lädt...
                                X