1. 什么是uniapp的video组件？
视频组件是uni-app提供的一个展示视频的组件，类似于 HTML 中的 video 标签，方便小程序开发者进行视频的播放控制。
2. uniapp的video组件错位的问题
2.1 具体表现
在使用uniapp的video组件进行视频播放的过程中，有时候会出现视频错位的问题，即视频会在页面中无法进行正确的居中显示，出现偏移。
如下图所示：
2.2 分析原因
在使用video组件进行视频播放时，如果播放器和容器的宽高不一致，视频容器里面就需要算出各个视频组件的大小和位置，此时就有可能会出现居中错位的情况。
因此，如果我们使用了类似下面的 CSS 代码，则有可能会导致视频居中错位的问题：
示例代码：
<style>
.video-container {
width: 300rpx;
height: 200rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<view class="video-container">
<video src="xxx"></video>
</view>
上述代码中，我们使用了 display: flex; 和 justify-content: center; align-items: center; 的 CSS 样式，希望能够让视频居中显示。但是，如果在使用 uni-app 的 video 组件时，使用了类似上面的 CSS 样式，就会导致视频居中显示错位的问题。
原因是 flex 布局会根据元素内容自动调整各个元素的大小和宽高比例，如果在video 嵌套 div 容器时， div 加上 flex 布局，该容器会自适应调整宽度，而 Video 组件自身是具备宽高比例的，当 Video 组件添加 object-fit 属性后，宽高比例不一致，也就出现了偏移现象。
2.3 解决方法
那么，要如何才能解决这个问题呢？下面提供两种解决方法。
方法一：通过 CSS 代码进行解决
若想通过 CSS 代码来解决该问题，可以使用下列 CSS 样式：
/*注意：修改类名 video-container*/
.video-container {
position: relative;
width: 300rpx;
height: 200rpx;
overflow: hidden;
}
.video-container video {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
上述代码中，我们通过设置将video组件的位置设置成绝对定位，然后通过top、left、right、bottom四个属性进行定位，这样就可以让video组件始终真正地居中显示。
方法二：通过使用view组件进行解决
若不想修改 CSS 样式，可以使用 view 组件来解决该问题：
<view class="video-wrapper">
<view class="video-content">
<video ... />
</view>
</view>
示例代码中添加了两个 view 容器，我们首先让外部的 view 容器作为 video 包裹器，根据外部 view 容器设置宽高；
然后，在容器 package 引入一个额外的 view 容器，其内部的 video 组件通过设置宽高为 100%，使视频在容器内可自适应。
这个方法看起来并不直观，但却可以有效地解决居中偏移问题。
3. 总结
uniapp 的 video 组件是一个非常方便小程序开发者进行视频播放控制的组件，但是在实际的开发过程中，可能会遇到 video 组件展示不居中的问题。
针对这个问题，本文提供了两种解决方法，详见上述内容。大家可以依据实际情况进行选择，并进行相应的代码修改。