与光标位置视频边界

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>

对于固定大小的视频：（详见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>元素上设置样式。它也可能帮助你解决任何可能遇到的情况。