Vue视频横着显示的原解决方法·使用视频编辑软件或·有时候视频编辑软件也会改变这个信息搞错方向
Vue视频横着显示的原因和解决方法
一、视频文件本身的旋转信息
有些视频在拍摄的时候，就像手机竖着拍视频，手机会自动加上一个信息，告诉播放器这个视频应该是竖着的。如果这个信息错了，视频就会横着显示。有时候，视频编辑软件也会改变这个信息，搞错方向。
| 拍摄设备 | 编辑软件 |
|---|---|
| 某些设备会自动添加旋转信息 | 有些软件可能会修改或添加旋转信息 |
解决方法：使用视频编辑软件或FFmpeg工具来检查和调整视频的旋转信息。
- 打开FFmpeg工具
- 输入旋转命令（例如：`ffmpeg -i input.mp4 output.mp4` 将视频旋转90度）
- 保存新的视频文件
二、CSS样式设置
在Vue项目中，CSS样式也会影响视频的显示。如果CSS设置了错误的旋转或变换属性，视频就可能横着显示了。
| Transform属性 | Object-fit属性 |
|---|---|
| 可以旋转、缩放或移动元素 | 决定视频如何填充其容器 |
解决方法：检查CSS文件中的相关样式设置，确保没有不正确的旋转或变换属性。
三、设备拍摄时的方向
设备拍摄时的方向也会影响视频的显示。比如，手机横着拍的视频就是横着的。
| 手机拍摄 | 相机设置 |
|---|---|
| 横屏模式下拍摄的视频默认横着 | 某些相机会记录设备方向信息 |
解决方法：拍摄视频时注意设备的方向，确保记录了正确的方向信息。
为了避免视频横着显示的问题，我们可以：
- 检查并调整视频文件的旋转信息
- 确保CSS样式中没有不正确的旋转或变换属性
- 注意设备在拍摄视频时的方向