在HTML5视频的顶部绘制一个矩形并获取坐标

Question

我在HTML5网页中有一个视频播放器，希望在视频播放器上的任意位置使用鼠标绘制矩形，并获取绘制矩形的相应（x，y）坐标。

这是我的div：

            <div class="col-md-5">
                <h3>Remote stream</h3>
                <video id="videoOutput" autoplay width="480px" height="360px"
                    poster="./img/test.png"></video>
                </br>
                Set source URL: <input style="width:350px;" id="address" type="text">
                </br></br>
            </div>

我对HTML5不太熟悉，我看到的一些示例使用的是画布，但不在视频的顶部。我正在寻找有关如何执行此操作的提示。

谢谢

AB