Vue js中的视频不能以全宽和全高显示

在Vue.js中，视频不能以全宽和全高显示的原因是因为视频元素的默认样式是按照视频的原始宽高比例进行显示的。如果想要实现全宽和全高显示，可以通过以下几种方式来实现：

使用CSS样式：可以通过设置视频元素的宽度为100%和高度为auto来实现全宽和按比例显示高度。例如：

<video style="width: 100%; height: auto;" controls>
  <source src="video.mp4" type="video/mp4">
</video>

使用Vue.js的计算属性：可以通过计算属性来动态设置视频元素的宽度和高度，以实现全宽和全高显示。例如：

<template>
  <video :style="{ width: videoWidth, height: videoHeight }" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</template>

<script>
export default {
  data() {
    return {
      videoWidth: '100%',
      videoHeight: 'auto'
    }
  },
  computed: {
    // 计算视频元素的宽度和高度
    videoSize() {
      const video = document.querySelector('video')
      if (video) {
        const aspectRatio = video.videoWidth / video.videoHeight
        if (aspectRatio > 1) {
          // 宽屏视频
          this.videoWidth = '100%'
          this.videoHeight = 'auto'
        } else {
          // 竖屏视频
          this.videoWidth = 'auto'
          this.videoHeight = '100%'
        }
      }
    }
  },
  mounted() {
    this.videoSize()
  }
}
</script>