如何在调整大小事件中获取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