如何在調整大小事件中獲取HTML5視頻寬度？

Question

我有一個簡單的視頻播放器：

<video id="v" controls width="640px" src="VIDEOHERE">
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

這個腳本：

    <script>
       var v = document.getElementById("v");
       v.addEventListener( "resize", function (e) {
           var width = this.videoWidth,
               height = this.videoHeight;
               alert(width);
       }, false );
    </script>

當用戶單擊調整大小按鈕並調整其大小時，我想獲取視頻的實際寬度和高度。

實際上，我正在嘗試在此播放器上管理重疊式廣告。 我已經制作了疊加層，但是當我調整視頻的大小時，我也需要調整疊加層的大小，但是現在我只有在頁面加載時才得到實際的寬度。

Answer 1

我不知道視頻播放器上是否有fullscreen事件。 您可以使用以下代碼嘗試使用默認瀏覽器全屏顯示：

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
    console.log('Do something when user goes into full screen mode');
});

有關此內容的更多詳細信息，請訪問： https : //developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Using_full_screen_mode