vue视频如何制作竖屏

制作竖屏视频在Vue中实现，可以通过一些步骤来确保视频在移动设备或其他需要竖屏显示的地方正确显示。1、调整视频的CSS样式，2、使用媒体查询，3、调整视频比例。以下是详细的步骤和解释。

一、调整视频的CSS样式

在Vue中，首先需要确保视频的CSS样式设置正确，使其能够在竖屏模式下显示。可以通过以下CSS样式来实现：

.video-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: auto;
  transform: rotate(90deg); /* 旋转视频90度 */
  object-fit: cover;
}

上述代码中，.video-container类用于定义视频容器的样式，确保其能够自适应不同屏幕尺寸。video标签通过旋转90度来实现竖屏显示。

二、使用媒体查询

为了确保视频在不同设备上的正确显示，可以使用CSS媒体查询来分别设置竖屏和横屏模式下的视频样式：

/* 竖屏模式 */
@media (orientation: portrait) {
  .video-container video {
    width: 100%;
    height: auto;
    transform: rotate(0deg); /* 保持正常显示 */
  }
}
/* 横屏模式 */
@media (orientation: landscape) {
  .video-container video {
    width: auto;
    height: 100%;
    transform: rotate(90deg); /* 旋转视频90度 */
  }
}

此代码确保在竖屏模式下视频正常显示，而在横屏模式下视频会旋转90度。

三、调整视频比例

为了确保视频在竖屏模式下的比例正确，可以使用以下方法：

固定比例容器：使用一个固定比例的容器来包裹视频。
保持比例：确保视频在不同屏幕尺寸下保持固定比例。

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 9:16 竖屏比例 */
  overflow: hidden;
}
.aspect-ratio-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

通过这种方法，可以确保视频在不同设备和屏幕尺寸下保持正确的竖屏比例。

四、在Vue组件中使用

在Vue组件中，可以结合上述样式和媒体查询，将视频嵌入到模板中：

<template>
  <div class="video-container">
    <div class="aspect-ratio-box">
      <video src="your-video-url.mp4" controls></video>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VerticalVideo'
}
</script>
<style>
/* 在此处引入上述CSS样式 */
.video-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: auto;
  transform: rotate(90deg);
  object-fit: cover;
}
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%;
  overflow: hidden;
}
.aspect-ratio-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 媒体查询 */
@media (orientation: portrait) {
  .video-container video {
    width: 100%;
    height: auto;
    transform: rotate(0deg);
  }
}
@media (orientation: landscape) {
  .video-container video {
    width: auto;
    height: 100%;
    transform: rotate(90deg);
  }
}
</style>

通过这种方式，可以确保视频在竖屏和横屏模式下都能正确显示。

五、常见问题及解决方法

视频变形问题：如果视频在不同设备上显示不正确，可能是因为比例设置不当。可以通过调整.aspect-ratio-box的padding-bottom属性来解决。
旋转失效问题：如果视频在横屏模式下没有旋转，可以检查CSS是否正确应用，并确保媒体查询生效。
视频加载问题：确保视频URL正确，并且服务器支持跨域请求。

六、总结

制作竖屏视频在Vue中实现需要调整CSS样式、使用媒体查询、调整视频比例，并在Vue组件中正确嵌入视频。通过以上方法，可以确保视频在不同设备和屏幕尺寸下正确显示。建议在实际项目中，根据具体需求进行调整和优化，以获得最佳效果。