Pahanda: <video> zwischenspeichern -> buffer

Hallo!

Ich möchte mit dem Video-Tag ein Video abspielen, aber mit 3 Sekunden Verzögerung.
Ich habe viel im Netz gesucht, aber wenig gefunden. Scheint auch so, dass noch nicht sehr viel mit dem video-tag gearbeitet wird.
Leider habe ich auch nur den erlaubten tag autobuffer gefunden, mehr nicht.

Gibt es auch einen buffer-tag? Oder wie sonst könnte ich ein Video zwischenspeichern, bevor es abgespielt wird?

Freue mich über Antworten oder Links, die das Thema behandeln.

  1. Hallo,

    Meine Idee:
    Du lässt das Video buffern, indem du das preload-Attribut beim video-Element setzt. Mit JavaScript hörst du auf den canplay- oder canplaythrough-Event. Wenn der eintritt, wartest du 3000 Millisekunden mit setTimeout. In dem Callback rufst du die play-Methode des video-Elements auf, um das Abspielen zu starten.

    Da das Buffern des Videos einige Zeit braucht und vielleicht bereits die 3s einnimmt, könntest du die Wartezeit natürlich entsprechend heruntersetzen, indem du die Zeit misst, die das Buffering benötigt, und die Wartezeit entsprechend verringerst.

    Siehe auch http://www.mediaevent.de/xhtml/video-audio.html.

    Mathias

    1. Hallo,

      Meine Idee:
      Du lässt das Video buffern, indem du das preload-Attribut beim video-Element setzt. Mit JavaScript hörst du auf den canplay- oder canplaythrough-Event. Wenn der eintritt, wartest du 3000 Millisekunden mit setTimeout. In dem Callback rufst du die play-Methode des video-Elements auf, um das Abspielen zu starten.

      Danke für die schnellen Antworten!

      Leider kenne ich mich in JS nicht gut aus (so gut wie garnicht).
      Ich hab etwas rumprobiert, aber so richtig will es nicht funktionieren.

      Bisher ignoriert der Video-tag mein JS. Egal wie ich es mache, das Bild erscheint schon früher. Hier der bisherige Code den ich mir zusammengesucht habe:

        
        
      <!DOCTYPE html>  
      <html>  
      <head>  
      <meta charset="utf-8">  
      <title>Display Webcam Stream</title>  
        
      <style>  
      #container {  
          margin: 0px;  
          width: 100%;  
          height: 100%;  
      }  
      #videoElement {  
          width: 100%;  
          background-color: #666;  
      }  
      </style>  
      </head>  
        
      <body>  
      <div id="container">  
          <video autoplay id="videoElement">  
        
          </video>  
      </div>  
      <script>  
       var video = document.querySelector("#videoElement");  
        
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;  
        
      if (navigator.getUserMedia) {  
          navigator.getUserMedia({video: true}, handleVideo, videoError);  
      }  
        
      function handleVideo(stream) {  
          video.src = window.URL.createObjectURL(stream);  
      }  
        
      function videoError(e) {  
          // do something  
      }  
       myVid=document.getElementById("videoElement");  
      myVid.oncanplay=setTimeout(alert, 1500, "Hello world!");  
        
      </script>  
      </body>  
      </html>  
        
      
      
  2. Hallo Pahanda

    Ich möchte mit dem Video-Tag ein Video abspielen, aber mit 3 Sekunden Verzögerung.

    Warum 3 Sekunden, ist das wichtig? Wenn ja, kannst du den Weg versuchen, den dir molily beschrieben hat. Ich bezweifle allerdings, ob das zuverlässig überall und immer funktionieren wird, was die 3 Sekunden betrifft. Wenn du aber nur ausreichend buffern willst, geht das ganz einfach mit autoplay, dann buffern die Browser von sich aus.

    Ich habe viel im Netz gesucht, aber wenig gefunden. Scheint auch so, dass noch nicht sehr viel mit dem video-tag gearbeitet wird.
    Leider habe ich auch nur den erlaubten tag autobuffer gefunden, mehr nicht.

    autobuffer ist nicht mehr aktuell und wurde durch das preload-Attribut ersetzt, das die values "none", "metadata" oder "auto" haben kann.

    Gibt es auch einen buffer-tag? Oder wie sonst könnte ich ein Video zwischenspeichern, bevor es abgespielt wird?

    Das machen die Browser von sich aus eigentlich ganz gut. Am einfachsten geht das, wenn das video-Element auf autoplay gesetzt wird und poster verwendet wird. Dann wird das poster sofort gezeigt und der Browser entscheidet, wie lange er buffert, bevor er beginnt das Video abzuspielen. Preload wird dann gar nicht gesetzt. Ohne autoplay und mit preload wird je nach Lust der Browser auch nur ein Teil des Videos geladen. Sinnvoll ist es aber, die Metadaten zu laden.

    Zum üben und lernen und zum informieren.

    Mit besten Grüssen Richard

    1. Die aktuellere Version zum Informieren.

      1. Danke für die schnellen Antworten!

        Warum 3 Sekunden, ist das wichtig? Wenn ja, kannst du den Weg versuchen, den dir molily beschrieben hat. Ich bezweifle allerdings, ob das zuverlässig überall und immer funktionieren wird, was die 3 Sekunden betrifft. Wenn du aber nur ausreichend buffern willst, geht das ganz einfach mit autoplay, dann buffern die Browser von sich aus.

        Es soll später ein Webcamstream zeitverzögert wiedergegeben werden. Da sind 3 Sekunden bei der Verzögerung ganz gut.

        autobuffer ist nicht mehr aktuell und wurde durch das preload-Attribut ersetzt, das die values "none", "metadata" oder "auto" haben kann.

        Schade! Denn da hätte man sonst beim preload einfach die Millisekunden angeben können und alles wär okay gewesen.

        Danke auch für die Links! Da muss ich mich erstmal durcharbeiten.

        1. Hallo Pahanda

          autobuffer ist nicht mehr aktuell und wurde durch das preload-Attribut ersetzt, das die values "none", "metadata" oder "auto" haben kann.
          Schade! Denn da hätte man sonst beim preload einfach die Millisekunden angeben können und alles wär okay gewesen.

          Das kann autobuffer nicht. Sein Rückgabewert ist boolean. Damit kann angezeigt werden, ob der Browser gerade buffert oder nicht. preload bietet da mehr Möglichkeiten. Das video-Element ist zur Wiedergabe einer Video-Ressource im Browser konzipiert. Wie der Browser das macht, kannst du nur sehr beschränkt beeinflussen.

          Es soll später ein Webcamstream zeitverzögert wiedergegeben werden. Da sind 3 Sekunden bei der Verzögerung ganz gut.

          Das war mir nicht klar. Das ist eine ganz andere Anforderung, die mit dem video-Element allein nicht lösbar ist. Du musst den von der Webcam erzeugten Stream zwischenspeichern. Ich hoffe, dass molily dafür eine Lösung hat.

          Mit besten Grüssen Richard

          1. Das war mir nicht klar. Das ist eine ganz andere Anforderung, die mit dem video-Element allein nicht lösbar ist. Du musst den von der Webcam erzeugten Stream zwischenspeichern. Ich hoffe, dass molily dafür eine Lösung hat.

            Ich bin jedenfalls gespannt. Ich habe es auch heute nicht geschafft. Aber wie gesagt... Ich bin in JS auch ziemlich schlecht.

            1. Hallo Pahanda

              Ich bin jedenfalls gespannt. Ich habe es auch heute nicht geschafft. Aber wie gesagt... Ich bin in JS auch ziemlich schlecht.

              Du willst die Bilder deiner Webcam in HTML5 einbinden und auf deinem Monitor direkt in einem Video-Element zeigen - vermute ich jedenfalls. Dazu diese Links:

              http://stackoverflow.com/questions/17331531/html5-capture-and-save-video
              http://www.purplesquirrels.com.au/2013/08/webcam-to-canvas-or-data-uri-with-html5-and-javascript/
              http://answer.techwikihow.com/206638/html5-capture-save-video.html

              Das löst aber nicht deine Absicht, den WebCam-Stream mit 3 Sekunden Verzögerung anzuzeigen. Du kannst der Cam nicht sagen: „zeige das, was du jetzt siehst, erst in 3 Sekunden“.

              Viel Spass und beste Grüsse
              Richard

              1. Hallo Pahanda

                Noch ein Link in deutsch.

                Beste Grüsse Richard

                1. Hallo Pahanda

                  Noch ein Link in deutsch.

                  Beste Grüsse Richard

                  Danke für die Links! Also die Webcam habe ich schon zum laufen gebracht. Das funktioniert. Die links helfen da sehr. Aber wie du vorher schon geschrieben hast, anscheinend ist das nicht möglich.

                  Die Frage ist für mich, ob es technisch nicht möglich ist oder ob es nur sehr, sehr aufwendig wäre.

                  1. Hallo Pahanda

                    Die Frage ist für mich, ob es technisch nicht möglich ist oder ob es nur sehr, sehr aufwendig wäre.

                    Technisch ist das sicher möglich. Ich kann nur mangels Erfahrung nichts zum Aufwand sagen, weil ich bisher nur mit der Forderung konfrontiert war, die Verzögerung der Anzeige möglichst kurz zu halten.

                    Der Webcam-Stream muss in einer Datei gespeichert und mit einer Verzögerung von 3 sec abgespielt werden. Der Haken ist, dass gleichzeitig geschrieben und gelesen werden muss.

                    Wird der Stream auf einen externen Server geladen und von dort in einer Site auf deinem Rechner  angezeigt, ergibt sich aus technischen Gründen eine Verzögerung von mehreren Sekunden, schwankt je nach Bedingungen. Das könnte wahrscheinlich mit Node.js gesteuert werden. Node.js könntest du auch auf einem lokalen Server einsetzen. Ich nehme an, damit liesse sich dein gewünschter Effekt erreichen.

                    Einfacher wäre es sicher, wenn du nicht durch die primi… ähh … bescheidenen Möglichkeiten des HTML5-Videoelements eingeschränkt wärst. Du könntest etwa Motion JPEG verwenden, was dir eine gute Bildqualität liefert. Und problemlos ginge das mit Flash - ich meine richtigem mit ActionScript.

                    Viel Spass und beste Grüsse
                    Richard

                    1. Der Webcam-Stream muss in einer Datei gespeichert und mit einer Verzögerung von 3 sec abgespielt werden. Der Haken ist, dass gleichzeitig geschrieben und gelesen werden muss.

                      Aber warum kann er nicht einfach gecacht werden?

                      Wird der Stream auf einen externen Server geladen und von dort in einer Site auf deinem Rechner  angezeigt, ergibt sich aus technischen Gründen eine Verzögerung von mehreren Sekunden, schwankt je nach Bedingungen. Das könnte wahrscheinlich mit Node.js gesteuert werden. Node.js könntest du auch auf einem lokalen Server einsetzen. Ich nehme an, damit liesse sich dein gewünschter Effekt erreichen.

                      Perfekt wäre es, wenn es via HTML5 / JS lokal auf dem Rechner gespeichert werden würde. So bräuchte man dann keine großen Serverkapazitäten

                      Einfacher wäre es sicher, wenn du nicht durch die primi… ähh … bescheidenen Möglichkeiten des HTML5-Videoelements eingeschränkt wärst. Du könntest etwa Motion JPEG verwenden, was dir eine gute Bildqualität liefert. Und problemlos ginge das mit Flash - ich meine richtigem mit ActionScript.

                      Es muss nicht zwingend HTML5 sein, aber auf Flash will ich doch lieber verzichten. Wer weriß, wie verbreitet Flash in 3 Jahren noch ist.

                      Was hat es mit Motion JPG auf sich? Da inforniere ich mich mal.

                      Habe jetzt nach einiger Recherche noch diese Website gefunden, die die Funktion in einer etwas abgeänderten Form beinhaltet: http://webcamtoy.com/de/

                      Einfach Webcam aktivieren und dann bis zu Split-Screen, Filmszene, Geist, Bunter Geist oder Vermischt durchklicken. Es scheint, als ob auch dort nur HTML5 verwendet wurde. Aber den exakten Code kann man ja leider nicht entnehmen.

  3. hi,

    [..] Oder wie sonst könnte ich ein Video zwischenspeichern, bevor es abgespielt wird?

    Freue mich über Antworten oder Links, die das Thema behandeln.

    Nicht direkt: Typed Arrays, aber möglich für eine Pufferlösung.

    Horst

    --
    Wenn der Kommentar nicht zum Code passt, kann auch der Code falsch sein.
    1. Nicht direkt: Typed Arrays, aber möglich für eine Pufferlösung.

      Danke für die Antwort! Dabei bleibt die Frage, wie man dann das Video verzögert abspielt. Und ob es wirklich funktioniert? Was ich aus dem Tutorial rauslese ist nicht sehr viel (Verstehe auch nur die Hälfte). Aber dabei geht es wohl um Rohdaten, die dann erst wieder interpretiert werden müssen?!