将视频标记放在Canvas标记上

问题描述

我想将视频播放器放在画布上。

（由于我的视频是alpha通道，我想在jpg上播放视频）

我这样编写代码如下
html

 < video id =mainVideosrc =item0.mp4> 
< / video> 
< canvas id =mainCanvas> 
< / canvas> 
  

my 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）
}假）; 
  

在我的想法中，它显示了jpg和视频。

Howevere，only the jpg appear on it，（video may be concealed by canvas ??）

请让我知道如何支付video on jpg ??

我的想法（使用HTML和canvas一起使用）是否正确？

解决方案

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

画布可以使用图片对象或视频元素作为图片来源。 p>

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

下面是代码示例：

  //对画布和上下文的引用
 var canvas = document.getElementById（mainCanvas） ; 
 var context = canvas.getContext（2d）; 
 var cw，ch; 
 
 //对视频元素的引用
 var v = document.getElementById（'mainVideo'）; 
 
 //等待视频元数据加载
 v.addEventListener（loadedmetadata，function（e）{
 
 //将画布大小设置为视频size 
 cw = canvas.width = v.videoWidth; 
 ch = canvas.height = v.videoHeight; 
 
 //用户按下时播放
 v .addEventListener（'play'，function（）{
 //在画布上显示视频帧的开始循环
 requestAnimationFrame（animate）; 
}，false）; 
 $ b b 
}，false） 
 
 //在画布上显示视频帧的循环
 function animate（time）{
 
 //如果用户停止视频则停止循环
 if v.paused || v.ended）{return; } 
 
 //在画布上绘制1个当前视频帧
 context.drawImage（v，0,0，cw，ch）; 
 
 //也在画布上绘制您的图像
 context.drawImage（img，0,0）; 
 
 //请求另一个循环
 requestAnimationFrame（animate）; 
 
} 
  

I would like to put the video player on Canvas.

(Since my video is alpha channel and I would like to play the video on jpg)

I made code like this belowhtml

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

my 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;
}

my 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);

In my thought,it shows the jpg and video on it.

Howevere, only the jpg appears on it,(video might be concealed by canvas??)

please let me know how can I pay the video on jpg??

My idea (using HTML and canvas together)is correct?

解决方案

You can draw both images and video on html canvas.

The canvas can use either image objects or video elements as its image source.

Both are drawn using separate context.drawImage commands

Here's example code:

// 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标记上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！