如何在HTML上的现有视频上绘制形状

Question

我正在努力创建一个允许我在现有视频上绘制任何形状的网站。 我尝试将我的代码放在视频顶部绘制任何形状，但是一旦我运行代码就会消失。 有人可以告诉我该怎么做或使用什么。 我使用HTML5，jquery，javascript来制作这个网站。

以下是调用视频和javascript文件的位置和方式

伤害范围

  

<div id="container">  
    <canvas id="imageView" width="755" height="430"></canvas>   
</div>  

<video id="sampleMovie" src="around.mp4" controls>  

</video>  

    <script src="example1.js">  

    </script>  

  

绘图的代码工作得很好

Answer 1

您只需创建一个div并将video元素放入其中就像这样：

<div>
    <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" loop autoplay>Your browser does not support the <code>video</code> element.</video>
</div>

对于此示例，我已使div适合屏幕，并为视频提供了height和width auto以及min-height和{ {1}}到min-width。我用以下代码完成了这个：

100%

当我想在视频上绘制形状时，我使用div { position: relative; height: 100vh; } video { min-height: 100%; min-width: 100%; height: auto; width: auto; } 上的:before代码，如下所示：

div

现在您可以根据需要进行自定义。

<强> Demo here