uniapp 如何获取video视频的width属性

在uniapp中，如何获取video组件的width属性？我需要在播放视频时动态获取视频的实际宽度，但尝试通过ref或属性绑定的方式都无法成功获取。请问有什么方法可以准确获取到video视频的真实宽度？

2 回复

在uniapp中，可以通过@loadedmetadata事件获取video的width属性：

<video @loadedmetadata="onVideoLoad" src="xxx"></video>

methods: {
  onVideoLoad(e) {
    console.log(e.detail.width) // 获取视频宽度
  }
}

或者通过createVideoContext获取：

const video = uni.createVideoContext('myVideo')
// 通过canvas等方式间接获取宽度

在 UniApp 中，获取 <video> 组件的 width 属性可以通过以下方法实现：

方法一：通过 query.select() 查询组件信息

使用 uni.createSelectorQuery() 获取 video 节点的宽度。

// 在页面或组件中
getVideoWidth() {
  const query = uni.createSelectorQuery().in(this);
  query.select('#myVideo').fields({
    rect: true,
    size: true
  }, (res) => {
    if (res) {
      console.log('视频宽度:', res.width);
      // 使用 res.width
    }
  }).exec();
}

在模板中定义 video 组件：

<video id="myVideo" src="video.mp4"></video>
<button @tap="getVideoWidth">获取宽度</button>

方法二：监听 loadedmetadata 事件

视频元数据加载完成后，通过事件对象获取视频原始宽度。

<video 
  src="video.mp4" 
  @loadedmetadata="onVideoLoaded"
></video>

methods: {
  onVideoLoaded(e) {
    const videoWidth = e.detail.width;
    console.log('视频原始宽度:', videoWidth);
    // 使用 videoWidth
  }
}

注意事项：

  1. 方法一获取的是组件渲染后的实际布局宽度（可能受样式影响）。
  2. 方法二获取的是视频本身的原始宽度（不受 CSS 样式影响）。
  3. 确保 video 组件已正确渲染后再执行查询操作。

根据你的具体需求选择合适的方法。

回到顶部