在畫布上

繪製視頻我試圖從在畫布上video元素繪製的視頻。我寫了下面的JS代碼：在畫布上

$(function() { 
    var video = $("#video"); 
    video.bind("loadedmetadata", function() { 
     var vw = this.videoWidth; 
     var vh = this.videoHeight; 
     var canvas = $('#canvas'); 
     canvas.width(vw).height(vh); 
     var context = canvas.getContext("2d"); 

     video.addEventListener("play", function() { draw(video, context, vw, vh); }, false); 
    }); 
}); 
function draw(video, context, vw, vh) 
{ 
    if (video.paused || video.ended) 
    {    
     return false; 
    } 

    context.drawImage(video, 0, 0, vw, vh); 
    setTimeout(draw, 20, video, context, vw, vh); 
}

這是我的HTML：

<body> 
<video id="video" autoplay controls> 
    <source src="src1.avi" /> 
    <source src="src2.mov" /> 
    <source src="src3.ogg" /> 
    <source src="src4.avi" /> 
</video> 
<canvas id="canvas"> 
    Please update your browser. 
</canvas>

的jsfiddle here

我可以看到視頻播放，但它沒有被重新繪製到帆布。我的錯誤在哪裏？

來源

2014-11-22 Igal

可能重複：[HTML5：內帆布顯示視頻（http://stackoverflow.com/questions/4429440/html5-display-video-inside-canvas） – Anubhav 2014-11-22 16:36:54

使用jQuery的元素，如視頻和畫布（和音頻），如果你不是絕對確保你做的什麼是自找麻煩。

你是例如調用getContext()，videoWidth，videoHeight等對jQuery的目的將無法正常工作，還混合香草的JavaScript與jQuery如bind()和addEventListener()。

我的第一個建議是用這些元素作業時，不僅會使生活變得不那麼麻煩，使用純香草的JavaScript，但你也將獲得一些性能可與這些要素是至關重要的。

二，總是使用與視頻和畫布。有沒有機會與setTimeout/setInterval正確synching這些。 RAF將確保更新幀以在恰當的時間進行監視。隨着視頻，你可以toggle the speed視頻很少高於30 FPS（在歐洲是25 FPS），它會給你一些額外的性能提升空間。

這裏是一個working code（仍然需要清理，雖然...）：

HTML - 添加preload = "auto"到視頻標籤播放之前趕上元數據：

<video id="video" preload=auto autoplay controls>

JavaScript

var video = $("#video")[0];    // video element itself is at index 0 
var vw; 
var vh; 

var canvas = $('#canvas')[0];    // canvas element itself is at index 0 
var context = canvas.getContext("2d"); // getContext on canvas element itself 

// setup canvas when metadata is available 
video.addEventListener("loadedmetadata", function() { 
    vw = this.videoWidth || this.width; // these are on video element itself 
    vh = this.videoHeight || this.height; 
    canvas.width = vw 
    canvas.height = vh; 
}, false); 

// call it straight, use global (or parent) variables 
video.addEventListener("play", draw, false); 

function draw() { 
    if (video.paused || video.ended) { 
     return; 
    } 

    context.drawImage(video, 0, 0, vw, vh); 

    requestAnimationFrame(draw); // loop anim. using rAF 
}

來源

2014-11-22 21:02:54 K3N

附加條件：如果帆布尺寸=視頻大小可以使用的更簡單的形式drawImage：'context.drawImage（video，0，0）'。 – K3N 2014-11-22 21:10:24

回答

相關問題