将视频标签放在画布标签上

Question

我想将视频播放器放在 Canvas 上。

（由于我的视频是 alpha 通道，我想以 jpg 格式播放视频）

我在下面编写了这样的代码 html

<video id="mainVideo" src="item0.mp4">
</video>
<canvas id="mainCanvas">
</canvas>

我的 CSS

#mainCanvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400;
    height: 400;
}

#mainVideo {
    position: absolute;
    top: 300;
    left: 300;
    margin: -50px 0 0 -50px;
}

我的 javascript

document.addEventListener('DOMContentLoaded', function(){
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.src = "image.jpg";
    context.drawImage(img, 0,0)
},false);

在我看来，它显示了 jpg 和视频。

但是，只有jpg出现在上面，（视频可能被画布隐藏了？？）

请告诉我如何支付 jpg 格式的视频？？

我的想法（同时使用 HTML 和画布）是否正确？

Answer 1

您可以在 html 画布上绘制图像和视频。

画布可以使用图像对象或视频元素作为其图像源。

两者都是使用单独的context.drawImage 命令绘制的

下面是示例代码：

// reference to canvas and context
var canvas=document.getElementById("mainCanvas");
var context=canvas.getContext("2d");
var cw,ch;

// reference to video element
var v = document.getElementById('mainVideo');

// wait until video metadata is loaded
v.addEventListener( "loadedmetadata", function(e){

    // set the canvas size to the video size
    cw=canvas.width=v.videoWidth;
    ch=canvas.height=v.videoHeight;

    // listen for when user presses play
    v.addEventListener('play', function(){
        // start loop that displays video frames on canvas
        requestAnimationFrame(animate);
    },false);


}, false );   

// loop that displays video frames on canvas
function animate(time){

    // stop the loop if user stops video
    if(v.paused || v.ended){ return; }

    // draw the 1 current video frame on the canvas
    context.drawImage(v,0,0,cw,ch);

    // also draw your image on the canvas
    context.drawImage(img,0,0);

    // request another loop 
    requestAnimationFrame(animate);

}