javascript - 如何在调整大小事件中获取 html5 视频宽度?

标签 javascript html

我有这个简单的视频播放器:

<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>

当用户单击调整大小按钮并调整其大小时,我想获取视频的实际宽度和高度。

实际上,我正在尝试管理此播放器上的叠加广告。 我已经制作了叠加层,但是当我调整视频大小时我也需要调整叠加层的大小,但现在我只在页面加载时获得实际宽度。

最佳答案

我不知道视频播放器上是否有 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

关于javascript - 如何在调整大小事件中获取 html5 视频宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31902359/

相关文章:

javascript - jQuery - 将动态链接从一个元素复制到另一个元素

javascript - react 没有找到事件

javascript - 如何使错误消息更快消失

html - 复选框:删除焦点上的方 block

HTML 5 video 标签视频和音频去同步

javascript - 将复选框状态(选中/未选中状态)读取到 Meteor 中的变量的语法

javascript - 运行查询后自定义弹出消息

javascript - jQuery 内存游戏 : if $ ('.opened' ). 长度; == 数字运行函数。

html - 高度 :100% not working inside flexbox with flex-grow

javascript - 无法将下拉列表与 Angular 列表绑定(bind)