获取视频宽度并不复杂，核心在于区分视频元素在页面中的渲染宽度和视频本身的原始分辨率宽度，前者可通过offsetWidth获取，后者则需读取videoWidth属性。
html div宽度设置：如何获取视频宽度并自适应
很多开发者遇到的第一道坎是搞不清视频宽度到底指什么,当你用html的div包裹视频时，div宽度决定了视频的显示区域，但视频本身自带原始尺寸，如果直接拿div的宽度去套视频，会得到错误结果，业内专家指出，正确获取视频宽度是响应式布局和播放器开发的基础，尤其当视频需要自适应容器时，你必须分别拿到两个值。
获取视频原始宽度的两种方法
视频的原始宽度存储在video元素的videoWidth属性中，这个属性只读，并且必须在视频元数据加载完成后才能访问，另一个常见需求是获取视频元素在页面中渲染后的宽度，那就要用offsetWidth或clientWidth，两者的区别在于：offsetWidth包含边框和内边距，clientWidth只包含内容区，多数情况下，直接使用offsetWidth就能满足需求。
使用场景对比：
- 需要知道视频本身的清晰度或比例 -> 用videoWidth
- 需要知道视频在布局中占了多少空间 -> 用offsetWidth
- 需要让视频自适应div宽度 -> 设置视频宽度为100%，然后在div上控制宽度
代码示例：获取视频宽度并应用到div容器
js代码必须在合适的时机执行,如果你在页面加载时立刻读取videoWidth，很可能会得到0，因为视频元数据还没下载完，正确的做法是监听loadedmetadata事件。
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
const originalWidth = video.videoWidth; // 原始宽度
const displayWidth = video.offsetWidth; // 渲染宽度
console.log('原始宽度:', originalWidth, '显示宽度:', displayWidth);
});
如果你需要根据视频的原始宽度来动态设置div的宽度,可以这样写：
video.addEventListener('loadedmetadata', function() {
const ratio = video.videoHeight / video.videoWidth;
const container = document.getElementById('videoContainer');
container.style.width = video.videoWidth + 'px'; // 按原始宽度设置容器
container.style.height = video.videoWidth ratio + 'px';
});
这样div的宽度就会与视频的原始宽度一致,保持比例，在实际项目中，html获取视频宽度代码通常会和响应式布局结合，利用CSS的max-width:100%让视频自动缩放，这时候只需要在JavaScript里获取videoWidth用于计算某个特定尺寸即可。
视频宽度自适应div宽度的实现技巧
让视频宽度自动适应父容器,最常见的方法是CSS设置，但有时候你需要在JavaScript里动态获取视频宽度，以便做进一步的逻辑处理，比如播放器控制栏的宽度同步。
让视频宽度自动适配父容器
纯CSS方法很简单,在视频元素上设置width: 100%，同时让父容器div宽度自适应，但这样做有一个隐患：如果视频原始尺寸很大，在宽屏上显示正常，但手机端可能会溢出，更好的做法是加上max-width: 100%，并设置height: auto。
#videoContainer {
width: 100%;
max-width: 1200px; / 可设最大宽度 /
}
#videoContainer video {
width: 100%;
height: auto;
display: block; / 去除底部间隙 /
}
这样视频宽度就会自动跟随div宽度变化,同时保持纵横比。视频宽度自适应div宽度的关键在于父容器不能有固定宽度限制，否则视频会被挤压。
JavaScript动态调整视频宽度
当窗口大小改变时,如果视频宽度需要重新计算，可以监听resize事件，但要注意防抖，避免频繁触发。
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
const video = document.getElementById('myVideo');
const currentWidth = video.offsetWidth;
console.log('窗口变化后视频宽度:', currentWidth);
// 这里可以执行其他逻辑，比如更新控制栏尺寸
}, 100);
});
如果你使用了响应式框架,比如Bootstrap，可以直接利用其栅格系统控制div宽度，视频宽度自然跟着变，但div宽度获取视频宽度时，要确保视频元素已经被渲染，且CSS样式已生效，如果视频隐藏或display:none，offsetWidth会返回0。
常见问题：为什么div宽度获取视频宽度为0
这个问题很常见,原因主要有两个：一是视频元素尚未加载完成，二是视频元素或父容器被隐藏。加载时机是关键，很多教程里直接写video.videoWidth，但没提醒读者必须等元数据事件，导致新手踩坑。
跨浏览器兼容性处理
videoWidth在所有现代浏览器中支持良好,但IE9-11也支持，只是需要处理一些边缘情况，如果视频源是跨域的，并且设置了crossOrigin属性，某些浏览器可能会限制videoWidth的读取，解决方案是在视频标签上添加
crossorigin=”anonymous”，并确保服务器端允许跨域。
html获取视频宽度代码在不同浏览器中对尺寸单位的表现一致，但要注意clientWidth和offsetWidth在IE中可能因为盒模型差异而略有不同，建议统一使用offsetWidth，如果不需要边框，可以用getBoundingClientRect().width，它返回的是浮点数，更精确。
Q&A: html获取视频宽度相关问题
问题1: html如何获取视频宽度？
使用video元素的videoWidth属性获取原始宽度,使用offsetWidth获取渲染宽度，注意需要在loadedmetadata事件之后读取videoWidth，否则返回0。
问题2: div宽度设置对视频宽度有什么影响？
如果视频宽度设置为百分比（如100%），则视频宽度完全由父div的宽度决定，如果视频宽度设置为固定值，则div宽度不影响视频宽度，但可能造成溢出或留白。
问题3: 获取视频原始宽度有什么用？
用于按比例缩放视频,避免拉伸变形；也可以用于计算视频播放器的控制栏尺寸，或生成缩略图时确定比例，据统计，大多数视频播放器都依赖videoWidth来维持正确的宽高比。
获取视频宽度的核心就是区分两个值，并选对时机。 无论是做自适应布局还是自定义播放器，只要记住原始宽度用videoWidth，渲染宽度用offsetWidth，再配合loadedmetadata事件，就能轻松避开常见坑。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/532614.html
