javascript - 如何在调整大小事件中获取 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/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode