vue-video-player 设置宽高

VueVideoPlayer 是一个用于 Vue.js 的视频播放组件，它可以帮助你在 Vue 应用中方便地嵌入和管理视频。要设置 VueVideoPlayer 的宽度和高度，你可以直接在组件的 props 中进行配置。以下是基本的使用方法：

1. 在模板（HTML）中引入组件并传递宽度和高度属性：

<vue-video-player :width="playerWidth" :height="playerHeight"></vue-video-player>

2. 在父组件的 JavaScript 中定义这些变量：

export default {
  data() {
    return {
      playerWidth: '640px', // 或者 '100%', 根据需求设置固定值或百分比
      playerHeight: '360px', // 同上
    };
  },
};

3. 如果你想要根据视口大小动态调整宽高，可以使用 CSS 的 `v-bind` 或 `ref` 结合 `window.innerWidth` 和 `window.innerHeight`：

<vue-video-player ref="videoPlayer" :style="{ width: '100%', height: 'auto' }"></vue-video-player>

export default {
  mounted() {
    this.$refs.videoPlayer.style.height = `${this.calculateAspectRatio(this.playerWidth, this.videoRatio)}px`;
  },
  computed: {
    videoRatio() {
      // 计算比例，根据你的视频原始宽高比（例如 16:9）
      return /* yourVideoRatio */;
    },
    calculateAspectRatio(width, ratio) {
      return (width / ratio).toFixed(0);
    },
  },
};