带光标位置的视频边框

Question

我正在使用ajax和jQuery抓取一个视频，然后创建一个名为＆＃34; displayMedia＆＃34;的地方：

<div class="displayMedia getCursorPosition" style="width: auto; height: auto; border-style: solid; border-width: 1px; border-color: red;" align="center"></div>

我想为该视频制作边框，当然视频有不同的尺寸，所以我试图制作边框来计算光标位置的X和Y，这样我就可以在哪里放置水印视频：

       $('.getCursorPosition').on( "mousemove", function( event ) {              
    $( ".displayCursorPosition" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

问题是边框设置不正确。

提前致谢

Answer 1

更新了使用新提供的HTML的代码：

对于自适应视频：

video {
  width: 100%;
  height: auto;
  display: block;
}

<div class="displayMedia getCursorPosition" style="width: auto; height: auto; border-style: solid; border-width: 5px; border-color: red;" align="center">
  <video controls>
    <source src="http://www.tutoriels-video.fr/videos/Serveur-dedie/tutoriel_connexion_ssh.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>

对于固定大小的视频:(有关详细信息，请参阅CSS中的评论）

.displayMedia {
  /* only set one width or height, set the other to auto - this will maintain the video aspect ratio */
  width: 320px;
  height: auto;
  border-style: solid;
  border-width: 5px;
  border-color: red;
  display: inline-block;
}
video {
  /* if you set the height of .displayMedia to a fixed size and the width to auto, then change the width of this element to 'auto' and the height to '100%', and the display to 'inline-block' */
  width: 100%;
  height: auto;
  display: block;
}

<div class="displayMedia getCursorPosition">
  <video controls>
    <source src="http://www.tutoriels-video.fr/videos/Serveur-dedie/tutoriel_connexion_ssh.mp4" type="video/mp4">Your browser does not support the video tag.
  </video>
</div>

我建议您参考this article以获取有关其工作原理的更多详细信息。我之前提供了此链接，它显示了我如何在<video>元素上设置样式。它还可以帮助您处理可能遇到的任何情况。