2011-03-29 47 views
0

從我的http://127.0.0.1 http服務器運行良好,並且通過「not」指定源標籤中的mimi類型在上傳到vistapanel.net主機時有效。有關代碼的快照。html5視頻在某些主機上不播放

<video id="vid" width="64" height="48" style="display:none"> 
     <source src="images/queryzoom.webmvp8.webm" /> 
     <source src="images/queryzoom.theora.ogv" /> 
</video> 
<video id="vid2" width="64" height="48" style="display:none"> 
     <source src="images/save.webmvp8.webm" /> 
     <source src="images/save.theora.ogv" /> 
</video> 
<canvas id="processCanvas" width="640" height="480" style="width:1px;height:1px" style="display:none"> 
</canvas> 

...

function newFrame() { 
    frame++;  
    if (frame > 1000) { 
     frame = 0; 
     svideo.currentTime = 0; 
     jvideo.currentTime = 0; 
    } 

...

if (frame == 200) { 
    jvideo.play(); 
} 

...

if (frame > 200 && frame < 320) { 
    process.drawImage(jvideo, 0,0,640,480); 
    var TheImage = process.getImageData(0, 0, 640, 480); 
    var jpgdata = TheImage.data; 
    for (var i = 0, n = jpgdata.length; i < n; i += 4) { 
    if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) { 
     jpgdata[i+3] = 0; 
    } 
    } 
    process.putImageData(TheImage, 0, 0); 
    gold = document.getElementById('processCanvas'); 
    ctx.fillRect(width-400,0,400,200); 
    fwidth=300; 
    ctx.drawImage(gold, width-180-(fwidth/2),0,fwidth,200); 
} 

...

if (frame == 810) { 
    svideo.play(); 

} 

...

if (frame > 800 && frame <1000) { 
    process.drawImage(svideo, 0,0,640,480); 
    if (frame <840) { 
     ctx.fillRect(width-400,0,(frame-800)*10,200); 
     var TheImage = process.getImageData(0, 0, 640, 480); 
     var jpgdata = TheImage.data; 
     for (var i = 0, n = jpgdata.length; i < n; i += 4) { 
     if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) { 
      jpgdata[i+3] = 0; 
     } 
     } 
     process.putImageData(TheImage, 0, 0); 
     gold = document.getElementById('processCanvas'); 
     progress = (frame-800)/40; 
     ctx.drawImage(gold, 0, 0, (640 * progress), 480, (width - 360), 0, (150 * progress), 100);      
    } else { 
     var TheImage = process.getImageData(0, 0, 640, 480); 
     var jpgdata = TheImage.data; 
     for (var i = 0, n = jpgdata.length; i < n; i += 4) { 
     if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) { 
      jpgdata[i+3] = 0; 
     } 
     } 
     process.putImageData(TheImage, 0, 0); 
     gold = document.getElementById('processCanvas'); 
     ctx.fillRect(width-400,0,400,200); 
     fwidth=300; 
     ctx.drawImage(gold, width-360,0,fwidth/2,100); 
    } 
} 

...

}

...

var frame=0; 

var jvideo = document.getElementById("vid"); 
var svideo = document.getElementById("vid2"); 


var canvas = document.getElementById('processCanvas'); 
var process = canvas.getContext('2d'); 

newFrame(); 

它扮演的第一次,但未能在第2次打。我正在考慮需要重新加載和缺少主機上的支持以通過範圍讀取文件的問題。因此,將更改視頻標籤中的src,而不是通過將currentTime設置爲零來重放 - 請注意,當currentTime未設置爲視頻播放時()不會在開始時啓動它。

希望有人已經解決/解決了這個問題?

公測http://sdfreelance.vistapanel.net/beta.html

回答

0

適用於此主機上的firefox 4.01。

1

教科書的解決方案來重新加載視頻是使用

if (frame > 1000) { 
    frame = 0; 
    svideo.load(); 
    jvideo.load(); 
} 

工程與Firefox而不是Chrome瀏覽器。應該注意的是,改變視頻的當前時間應該可以工作,但是由於主機問題(爲html5視頻設置apache是​​一個完全不同的問題),視頻將繼續處於播放模式,永遠不會到video.ended = true;因此沒有範圍信息,範圍值爲零也不例外。

Firefox似乎正在使用視頻緩存,而Chrome並非如此。

不是問題的答案,我想,但 -

  • 什麼可以做的是使用PHP應用程序建立一個正確的HTTP報頭和視頻循環不需要視頻重啓一遍又一遍deliever視頻。