在畫布HTML5上繪制視頻
[英]Draw video on canvas HTML5
問題描述
我正在嘗試在畫布上繪制視頻。 為此，我捕獲了Javascript中的onMouseDown和onMouseUp事件，以獲取每個事件的x和y坐標（我需要在畫布內設置視頻的位置，寬度和高度）。
因此，每次我在畫布上繪制視頻時，都應該停止創建的視頻，然后播放新的視頻。 兩個問題：
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/
3 個解決方案
解決方案1
3 已采納 2015-11-20 20:51:40
1）drawImage（）方法僅被調用一次。 每幀需要調用一次。
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);
}
}
解決方案2
2 2015-11-20 20:50:52
您需要設置一個連續渲染。 您只渲染視頻的第一幀。 畫布很笨，不了解視頻。 您剛剛將視頻中的像素轉儲到了畫布上。 您需要不斷更新畫布。
最好的方法是使用requestAnimationFrame ，以確保所有內容都與瀏覽器自己的呈現同步。
在下面的示例中，加載視頻后開始渲染。 如果您加載第二個視頻，請確保結束以前的更新。
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>
解決方案3
-1 2016-06-03 06:49:15
從最近幾天開始，我正在從事一個稱為色度鍵控效果的項目，其中包含兩個視頻的混合。因此，在互聯網上搜索了很長時間后，我發現了一個名為RecordRTC的API，該API可以為您提供解決方案。
HTML5 Canvas 第一次繪制時未顯示來自視頻的圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.