呈現像javascript中的視頻圖像鏈

我正在嘗試使用JavaScript中的圖像流合成視頻。問題是「視頻」是乾的，這是通過使用各種緩衝區解決的。但是現在問題在於圖像的下載速度比渲染的要快得多。呈現像javascript中的視頻圖像鏈

如果您的圖像來源發生變化，如IP攝像機，您可以嘗試下面的示例。我注意到的是，「視頻」仍然更新很慢，但是在觀看數據包嗅探器時，我可以看到圖像實際上被完全檢索的速度比渲染速度快得多。

這裏是例子：

<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>

來源

2010-12-15 ArturPhilibin

+1有趣的問題 – 2010-12-15 09:55:12

我自己尋找解決方案。這裏有一篇關於做一些非常方便的IP攝像頭的小文章。

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

另外嘗試加載在圖像條（CSS STUF）的所有圖像（假設就不會有大量的圖像），並隱藏所有但首先用溢出：隱藏。然後用setInterval（基本上是一個非常快速的滑塊，沒有任何過渡動畫）改變圖像的位置爲圖像的寬度。在這種情況下，所有圖像都將被加載和渲染，並且您可以控制每個「幀」之間的時間。

來源

2014-11-23 23:06:26 Gawran

，而不是加載圖像，儘可能多，你可以使用window.setInterval方法，使以設定的間隔功能運行，例如第二十倍。

您可以在顯示圖像後立即開始加載下一張圖像，但不是讓加載事件顯示圖像，而是讓以某個間隔運行的函數執行該操作。

來源

2010-12-15 10:04:05 Guffa

您的視頻幾乎肯定會不穩定，除非圖像的大小在某種程度上保證一致。即使如此，圖像的加載將取決於網絡條件。關於您加載圖片的腳本加載速度比他們顯示的速度更快的問題，除非我們實際訪問您的源代碼，否則無法確定其來源。

使用Stack Exchange API作爲圖像源重寫代碼，並使用Firebug監控活動，我們可以看到網絡活動與我們在屏幕上看到的大致相符。

alt text

使用的代碼是：

$('#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');

看到這個代碼住在這裏的工作：（在其他瀏覽器中的firefox-不是問題）http://www.jsfiddle.net/yijiang/r957s/

來源

2010-12-15 10:15:57

我在問題中的源代碼導致圖像檢索速度快於呈現問題。你的代碼也可以在我的相機上使用。所有的圖像總是在60kB左右，並且在局域網上，所以我認爲它可能只是瀏覽器無法像下載它們那樣快速渲染圖像。 – ArturPhilibin 2010-12-15 11:30:18

@DaSilva_Ireland在這種情況下，您可能不會使用正確的工具來解決問題 - 您可能想要轉而使用更專門處理此問題的內容 – 2010-12-15 11:33:07

我有一個類似的問題最後，我以電影膠片的形式將我的電影下載到電影中，並將它放在溢出隱藏的div中，並將影像偏移一幀的高度。保存幾個文件大小以啓動文件！我用gdlib製作了我的幻燈片

來源

2012-03-31 01:04:33

呈現像javascript中的視頻圖像鏈

回答

相關問題