Rendern einer Kette von Bildern wie ein Video in Javascript

Ich versuche, ein Video mit einem Strom von Bildern in JavaScript zu synthetisieren. Das Problem ist das "Video" ist entweder ruckelnd, die mit einem Puffer der Art gelöst wurde. Jetzt besteht das Problem jedoch darin, dass Bilder tatsächlich viel schneller heruntergeladen werden, als sie gerendert werden.Rendern einer Kette von Bildern wie ein Video in Javascript

Wenn Sie eine Quelle von Bildern haben, die sich ändern, wie eine IP-Kamera, können Sie das Beispiel unten versuchen. Was ich bemerkt habe, ist, dass das "Video" immer noch ziemlich langsam aktualisiert wird, aber während ich einen Paket-Sniffer sehe, kann ich sehen, dass das Bild tatsächlich viel schneller wiederhergestellt wird, als es gerendert wird. Hier

ist das Beispiel:

<HTML> 
    <HEAD> 
    <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 
    </SCRIPT> 
    <SCRIPT> 
     function startVideo() 
     { 
     //when the buffer image is loaded, put it in the display 
     $('#image-buffer').load(function() 
     { 
      var loadedImage = $(this).attr('src'); 

      $('#image-displayed').attr('src', loadedImage); 

      $(this).attr('src', 
      'http://path.to/image.jpg?nocache=' + Math.random()); 
     }); 

     $('#image-buffer').attr('src', 
      'http://path.to/image.jpg?nocache=' + Math.random()); 
     } 

     function stopVideo() 
     { 
     $('#image-buffer').unbind('load'); 
     $('#image-buffer').attr('src', ''); 
     $('#image-displayed').attr('src', ''); 
     } 
    </SCRIPT> 
    </HEAD> 
    <BODY> 
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/> 
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/> 
    <IMG ID="image-displayed"/> 
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/> 
    </BODY> 
</HTML>

Quelle

2010-12-15 ArturPhilibin

+1 interessante Frage –

Auf der Suche nach einer Lösung selbst. Hier ist ein netter kleiner Artikel darüber, etwas sehr praktisches für den IP-Kameragehäuse zu tun.

http://techslides.com/convert-images-to-video-with-javascript

finden Sie alle Bilder in einem Bildstreifen (CSS stuf) Laden (unter der Annahme, dass es keine große Menge von Bildern wäre) und alle verstecken, aber zuerst mit Überlauf: versteckt. Ändern Sie dann die Bildstreifenposition für die Breite des Bildes mit setInterval (im Grunde ein sehr schneller Schieberegler ohne Übergangsanimationen). In diesem Fall wären alle Bilder bereits geladen UND gerendert und Sie können das Timing zwischen jedem "Frame" steuern.

Quelle

2014-11-23 23:06:26 Gawran

Statt Laden von Bildern so oft wie möglich, können Sie die window.setInterval Methode verwenden, um eine Funktion Lauf in einem festgelegten Intervall zu machen, zum Beispiel zehnmal pro Sekunde.

können Sie beginnen das nächste Bild geladen, sobald Sie ein Bild angezeigt, aber stattdessen das Ladeereignis es zeigt zu haben, können Sie die Funktion lassen, die in einem Intervall tun, ausgeführt wird.

Quelle

2010-12-15 10:04:05 Guffa

Ihr Video wird mit ziemlicher Sicherheit ruckeln, es sei denn, die Größe der Bilder ist garantiert konsistent. Und selbst dann wird das Laden der Bilder von den Netzwerkbedingungen abhängig sein. Zu dem Problem, dass das Skript Bilder schneller lädt, als sie angezeigt werden, gibt es keine Möglichkeit, die Quelle dafür zu bestimmen, es sei denn, wir erhalten tatsächlichen Zugriff auf Ihre Quelle.

den Code Umschreiben des Stapel Exchange-API als Bildquelle verwendet wird, und die Überwachung Aktivität Firebug können wir sehen, dass die Netzwerkaktivität in etwa dem entsprechen, was wir auf dem Bildschirm sehen.

alt text

Der verwendete Code ist:

$('#buffer').load(function(){ 
    $('#video').attr('src', this.src); 
    this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime(); 
}).trigger('load');

diesen Code Siehe Live, hier zu arbeiten: (. In Firefox-nicht ein Problem in anderen Browsern) http://www.jsfiddle.net/yijiang/r957s/

Quelle

2010-12-15 10:15:57

Der Quellcode ich in der Frage haben bewirkt, dass das Problem der Bilder schneller abgerufen werden als wiedergegeben wird. Dein Code auch wenn ich ihn mit meiner Kamera benutze. Alle Bilder sind immer um 60kB und es ist in einem LAN, so dass ich denke, es kann nur sein, dass der Browser die Bilder nicht so schnell rendern kann, wie sie heruntergeladen werden können. – ArturPhilibin

@DaSilva_Ireland In diesem Fall verwenden Sie wahrscheinlich nicht die richtigen Werkzeuge für das Problem - Sie werden wahrscheinlich etwas Spezielleres verwenden wollen –

Ich hatte ein ähnliches Problem Am Ende habe ich meinen Film buchstäblich als Filmstreifen heruntergeladen, in ein überlaufendes verborgenes div gelegt und das Bild um die Höhe eines Rahmens versetzt. Speichert ein paar k für die gesamte Dateigröße zum Booten! Ich machte meinen Filmstreifen mit gdlib

Quelle

2012-03-31 01:04:33

Rendern einer Kette von Bildern wie ein Video in Javascript

Antwort

Verwandte Themen