如何在调整大小事件中获取HTML5视频宽度？

Question

I have this simple video player:

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

And this script:

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

I would like to get the actual width and height of the video when the user clicked on the resize button and its resized.

Actually I'm trying to manage an overlay advertisement on this player. I have already made the overlay, but when I resize the video I need to resize the overlay too, but now I only get the actual width when my page load.

Answer 1

I don't know if there's a fullscreen event on the video player. You can try the default browser full screen, with the following code:

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

More details on this on: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode