如何在视频上叠加画布

我有一个视频和一个div内的画布，我希望将画布叠加在视频上。我尝试这样做：如何在视频上叠加画布

.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

但由于某些原因在画布上没有覆盖整个视频，很短。我如何解决这个问题？

来源

2016-09-24 Priyatham

将画布高度调整为100％可确保覆盖整个视频。 auto标签只是根据需要显示的数据量来调整对象的大小。例如。对于带有'宽度：自动'的< \ p>标签，文字越多，标签越宽等。。容器边距：0自动; 位置：相对; }

.video { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

.canvas { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-color:black; 
    top: 0; 
    left: 0; 
    z-index: 10; 
}

来源

2016-09-24 01:42:41 UnknownRobotik

画布必须有绝对的宽度和高度。当视频加载时，您可以分配正确的宽度和高度。

这里：的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>

来源

2016-09-24 01:59:26 danielarend

如何在视频上叠加画布

回答

相关问题