设置宽高_Web前端基础教程：HTML5中的video动态怎么设置宽高

在 HTML5 中，可以使用 `video` 标签来添加视频，并通过 `width` 和 `height` 属性设置视频的宽度和高度。

例如，设置宽度为 500 像素，高度为 300 像素的视频，可以这样写：

<video width="500" height="300">
  <source src="video.mp4" type="video/mp4">
</video>

其中，`<source>` 标签用于指定视频文件的路径和类型。

当然，也可以通过 CSS 样式来设置视频的宽度和高度，例如：

<video class="my-video">
  <source src="video.mp4" type="video/mp4">
</video>

<style>
  .my-video {
    width: 500px;
    height: 300px;
  }
</style>

这样，也可以实现相同的效果。

相关问题

uniapp中video怎么设置视频宽高

在uniapp中使用video标签，可以通过设置style属性来设置视频的宽度和高度。如下所示：

<video src="your_video_url" style="width: 100%; height: 300px;"></video>

其中style属性中的width和height属性可以根据需要进行调整，单位可以是px、rem、vw、vh等。这样就可以设置视频的宽度和高度了。

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);
    },
  },
};