将视频标签放在 Canvas 标签上

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，（视频可能被canvas隐藏了？？）

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

我的想法（同时使用HTML和canvas）正确吗？

Answer 1

您可以在 html canvas.

上绘制图片和视频

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

两者都是使用单独的 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);

}

将视频标签放在 Canvas 标签上

Put the video tag on the Canvas tag

html

canvas

html5-video

html5-canvas