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

如何在resize事件中获取html5视频宽度？

1 个答案: