如何在视频上覆盖画布答案

【问题标题】：How do I overlay a canvas over a video如何在视频上覆盖画布
【发布时间】：2017-02-01 22:50:05
【问题描述】：

我在 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

但由于某种原因，画布没有覆盖整个视频，它更短。我该如何解决？

【问题讨论】：

标签： css html canvas

【解决方案1】：

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

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

【讨论】：

在本例中，图像不会随视频调整大小

【解决方案2】：

将画布的高度调整为 100% 可确保覆盖整个视频。自动标签只是根据需要显示的数据量调整对象的大小。例如。对于带有 'width:auto' 的标记，文本越多，标记越宽等。。容器 { 边距：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;
}

【讨论】：