视频边框与光标位置

Question

我正在使用 ajax 和 jQuery 抓取视频，并创建一个名为 "displayMedia" 的显示位置：

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

对于 fixed-size 视频：（有关详细信息，请参阅 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 以了解有关其工作原理的更多详细信息。我之前提供了这个 link，它显示了我如何能够在 <video> 元素上设置样式。它还可以帮助您解决您可能遇到的更多情况。

视频边框与光标位置

Video borders with cursor position

css

cursor-position

border-layout