Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 4
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 3 4 Weiter
  • #31
    Zuletzt geändert von hausl; 11.10.2018, 08:21.
    "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> 
    The string "()()" is not palindrom but the String "())(" is.

    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
                Zuletzt geändert von hellbringer; 11.10.2018, 10:41.
                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.
                        The string "()()" is not palindrom but the String "())(" is.

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

                          }); 
                          The string "()()" is not palindrom but the String "())(" is.

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

                              }); 
                              The string "()()" is not palindrom but the String "())(" is.

                              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
                                The string "()()" is not palindrom but the String "())(" is.

                                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

                                Vorherige 1 2 3 4 Weiter
                                Lädt...
                                X