uniapp中怎样使<video>视频宽度根据设置的固定高度进行缩放

在uniapp中，可以通过设置<video>标签的宽度为100%来让视频宽度自适应父容器的宽度。然后，再通过设置<video>标签的height属性来设置视频的高度。这时，<video>标签会按照设置的固定高度进行缩放，从而达到视频宽度根据设置的固定高度进行缩放的效果。

例如：

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

其中，设置了<video>标签的宽度为100%，高度为200px。这样，<video>标签会根据设置的高度进行缩放，达到视频宽度根据设置的固定高度进行缩放的效果。

相关问题

nave中怎样使<video>视频宽度根据设置的固定高度进行缩放

可以使用CSS中的object-fit属性来实现该效果。object-fit属性可以设置元素内容（例如图片或视频）如何适应其容器框。在这种情况下，可以将object-fit设置为contain，这样视频将自适应其容器的高度，并根据视频的宽高比来缩放宽度，以适应容器的宽度。

示例代码如下：

<style>
  .video-container {
    height: 400px; /* 设置容器高度 */
    width: 100%; /* 设置容器宽度 */
    position: relative; /* 设置相对定位 */
    overflow: hidden; /* 隐藏溢出部分 */
  }
  .video-container video {
    position: absolute; /* 设置绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 设置视频宽度为容器宽度 */
    height: 100%; /* 设置视频高度为容器高度 */
    object-fit: contain; /* 缩放视频以适应容器高度 */
  }
</style>

<div class="video-container">
  <video src="example.mp4" autoplay loop muted></video>
</div>

以上代码中，.video-container类设置容器的高度和宽度，并使用相对定位和溢出隐藏来创建一个容器。video元素使用绝对定位覆盖整个容器，并将其宽度设置为100%以适应容器的宽度。object-fit属性设置为contain，以缩放视频以适应容器的高度。

在uniapp中nvue里<video src="your_video_url" style="width:100%; height:200px; object-fit:cover;"></video>视频宽度根据设置的固定高度进行缩放失效怎办

在 uni-app 中，如果在 nvue 中设置 `<video>` 标签的宽度为 `100%`，而高度为固定值，但视频宽度没有根据设置的固定高度进行缩放，可能是因为 nvue 中的 `<video>` 标签样式需要使用 uni-app 官方提供的样式，而不是普通的 CSS 样式。

可以尝试使用 `app-nvue` 组件内置的样式解决问题。

例如，你可以将代码修改为：

<template>
  <view>
    <video src="your_video_url" 
      class="uni-video" 
      style="height:200px; object-fit:cover;">
    </video>
  </view>
</template>

<style>
  .uni-video {
    width: 100%;
  }
</style>

在这个例子中，我们给 `<video>` 标签添加了 `class="uni-video"`，然后在样式中使用了官方提供的样式类 `.uni-video`，将宽度设置为 `100%`，高度设置为 `200px`，并使用 `object-fit: cover` 让视频按照比例缩放。

这样，视频的宽度就会根据设置的固定高度进行缩放了。

希望这个解决方案能够帮助到你。