我在 div 中有一个视频和一个 Canvas ,我想将 Canvas 覆盖在视频上。我试过这个:
.container {
margin: 0 auto;
position: relative;
}
.video {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.canvas {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
JSFiddle here
但由于某种原因 Canvas 没有覆盖整个视频,它更短。我该如何解决?
最佳答案
Canvas 必须有绝对宽度和高度。当视频加载时,您可以分配正确的宽度和高度。
这里:jsfiddle: https://jsfiddle.net/7sk5k4gp/13/
PS:为了更好理解,我放了一个红色滤镜。
上面的代码:
<style>
.canvas {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background-color:rgba(255,0,0,0.5);
}
</style>
<div class="container">
<video class="video" id="vd1" controls autoPlay src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_sma ll.ogv" onplay="resize_canvas(this)"></video>
<canvas class="canvas" id="cv1"></canvas>
</div>
<script>
function resize_canvas(element)
{
var w = element.offsetWidth;
var h = element.offsetHeight;
var cv = document.getElementById("cv1");
cv.width = w;
cv.height =h;
}
</script>
关于css - 如何在视频上叠加 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39671568/