キャンバスにビデオを描画するHTML5

私はキャンバスにビデオを描こうとしています。これを達成するために、JavascriptでonMouseDownイベントとonMouseUpイベントをキャプチャして、各イベントのx座標とy座標を取得します（キャンバス内のビデオの位置、幅、高さを設定する必要があります）。キャンバスにビデオを描画するHTML5

したがって、キャンバスに動画を描画するたびに、前に作成した動画を停止して新しい動画を再生する必要があります。 2つの問題：

1）（関数は、最初のフレームのみ）を描き、彼の音声が

2）どのように私が以前に停止した動画を引かれ得ることができない再生できない動画？

デモ：http://jsfiddle.net/e3c3kore/

<body> 
    <canvas id="canvas" width="800" height="600"></canvas> 
</body> 



var canvas, context, xStart, yStart, xEnd, yEnd; 

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 
canvas.addEventListener("mousedown", mouseDown); 
canvas.addEventListener("mouseup", mouseUp); 

function mouseDown(e) { 
    xStart = e.offsetX; 
    yStart = e.offsetY; 
} 

function mouseUp(e) { 
    xEnd = e.offsetX; 
    yEnd = e.offsetY; 
    if (xStart != xEnd && yStart != yEnd) { 
    var video = document.createElement("video"); 
         video.src = "http://techslides.com/demos/sample-videos/small.mp4"; 
         video.addEventListener('loadeddata', function() { 
          video.play(); 
          context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart); 
         }); 
    } 
}

デモ：http://jsfiddle.net/e3c3kore/

出典

2015-11-20 user3673449

1）のdrawImage（）メソッドは一度だけ呼び出されるました。フレームごとに1回呼び出す必要があります。

2）pause（）メソッドを呼び出してビデオを停止します。

たとえば、次のコードでは、マウスを上に動かすためのタイマーループ（フレームを描画する）を開始し、マウスを押したときに以前のビデオを停止します。

var canvas, context, video, xStart, yStart, xEnd, yEnd; 

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 
canvas.addEventListener("mousedown", mouseDown); 
canvas.addEventListener("mouseup", mouseUp); 

function mouseDown(e) { 
    if (video) { 
     video.pause(); 
     video = null; 
     context.clearRect(0, 0, canvas.width, canvas.height); 
    } 
    xStart = e.offsetX; 
    yStart = e.offsetY; 
} 

function mouseUp(e) { 
    xEnd = e.offsetX; 
    yEnd = e.offsetY; 
    if (xStart != xEnd && yStart != yEnd) { 
     video = document.createElement("video"); 
     video.src = "http://techslides.com/demos/sample-videos/small.mp4"; 
     video.addEventListener('loadeddata', function() { 
      console.log("loadeddata"); 
      video.play(); 
      setTimeout(videoLoop, 1000/30); 
     }); 
    } 
} 

function videoLoop() { 
    if (video && !video.paused && !video.ended) { 
     context.drawImage(video, xStart, yStart, xEnd - xStart, yEnd - yStart); 
     setTimeout(videoLoop, 1000/30); 
    } 
}

出典

2015-11-20 20:51:40

まさに私が探していたものです。ありがとう！ – user3673449

あなたは連続レンダリングを設定する必要があります。ビデオの最初のフレームのみをレンダリングしています。キャンバスはダムで、ビデオについては知らない。ビデオからキャンバスにピクセルをダンプしました。キャンバスを継続的に更新する必要があります。

最も良い方法は、を使用することです。これにより、すべてがブラウザ自身のレンダリングと同期されます。

以下の例では、ビデオが読み込まれるとレンダリングが開始されます。 2番目のビデオを読み込む場合は、必ず前のアップデートを終了してください。

var canvas = document.getElementById("canV"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var video = document.createElement("video"); 
 
video.src = "http://techslides.com/demos/sample-videos/small.mp4"; 
 
video.addEventListener('loadeddata', function() { 
 
    video.play(); // start playing 
 
    update(); //Start rendering 
 
}); 
 

 

 

 

 
function update(){ 
 
    ctx.drawImage(video,0,0,256,256); 
 
    requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.  
 
}

#canV { 
 
    width:256px; 
 
    height:256px; 
 
}

<canvas id="canV" width=256 height=256></canvas>

出典

2015-11-20 20:50:52 Blindman67

rAFはビデオより高いフレームレートで起動できるので、ビデオの 'currentTime'が変更されたのを待つ方が良いでしょう。これはブラウザによって計算されているので、' video.timeupdate 'イベント、ループの開始時に' video.currentTime！== lastPaintedFrameTime'をチェックしてください。しかし、とにかく、これは 'setTimeout'よりもrAFが最適です... – Kaiido

マウスを使ってビデオをドラッグし、ビデオフレームレートでレンダリングしている場合は、マウスが60で更新されるので、奇妙な効果が得られます回/秒。 'video.timeupdate'はビデオフレームレートと一致する必要もなく、' requestAnimationFrame'のようなDOMイベントのためにフレームを落とさないでしょう。 'timeupdate'は画面の更新に同期されません。最後に、 'currentTime'は必ずしも離散的なステップではありません。 'currentTime'がlastと異なることは、レンダリングに利用可能な新しいフレームがあることを意味しません。 – Blindman67

OPのマウスポジションを忘れました。申し訳ありませんが、マウスが動いているときにフラグを設定するのがベストでしょうか？ DOMイベントのフレームを削除するtimeupdateについてはわかりませんが、参照はありますか？ブラウザーがビジー状態の場合、rAFはフレームをドロップします。しかし、currentTimeでは、異なるcurrentTimesが新しいフレームがペイントされたことを意味しないと私が同意しても、2つの同一のものは同じフレームがペイントされることを意味します。 http://stackoverflow.com/questions/28420724/how-to-determine-the-intended-frame-rate-on-an-html-video-element – Kaiido

-1

私は2つのvideos.soのF混合で構成効果をクロマキーと呼ばれる同じプロジェクトに取り組んでいます最後の数日間から私はこのAPI RecordRTCと呼ばれるAPIがあなたに解決策を与えることができたインターネット上での長いを検索した後。

出典

2016-06-03 06:49:15 CyberAbhay

この回答を一度に展開できますか？良質の回答を確実に得るためにここをクリックしてください。http://stackoverflow.com/help/how-to-answer –

キャンバスにビデオを描画するHTML5

答えて

関連する問題