與光標位置視頻邊界

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>元素上設置樣式。它也可能幫助你解決任何可能遇到的情況。