uniapp 视频播放 固定宽度 自适应高度

在 uni-app 中播放视频，可以使用 `<video>` 标签。如果你想让视频的宽度固定，可以在 `<video>` 标签中添加 `style` 属性，并设置其宽度：

<video style="width: 400px;"></video>

如果你想让视频的高度自适应，可以设置其高度为 `auto`：

<video style="height: auto;"></video>

这样，视频的宽度就固定为 400px，而高度则根据视频内容自适应。

相关问题

uniapp图片自适应宽度

在uniapp中展示图片时，可以通过使用image标签的mode属性来控制图片的自适应宽度。如果只固定调整图片的宽度而图片的高度可以自动根据图片原始比例调节，可以使用mode属性的widthFix值。具体的使用方法可以参考引用中的代码示例。同时需要注意，uniapp中展示图片时使用的是image标签而不是img标签。

uniapp中使用自适应

在UniApp中使用自适应布局可以通过使用flex布局和rem单位来实现。

首先，在index.html文件中添加以下代码：

<script>
  // 计算rem
  function setRemUnit() {
    let docEl = document.documentElement
    let rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()
  window.addEventListener('resize', setRemUnit)
</script>

这段代码的作用是计算页面宽度并设置根元素的字体大小，以rem作为单位，其中1rem等于根元素的字体大小。这样，在页面中使用rem作为单位时，它们的大小会随着页面宽度的变化而自适应地改变。

接下来，在App.vue中的style标签中使用flex布局，例如：

<style>
  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
  }
  
  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f2f2f2;
  }

  .header {
    flex: none;
    height: 48px;
    background-color: #fff;
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
  }
  
  .item {
    flex: none;
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  
  .item-title {
    flex: 1;
    padding-left: 10px;
    font-size: 16px;
  }
  
  .item-arrow {
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-image: url('~@/assets/icons/arrow-right.png');
    background-size: cover;
  }
</style>

这里使用了flex布局来实现页面的自适应，其中#app元素使用flex-direction: column设置为纵向布局，子元素.header和.content使用flex属性分别占据父元素的固定高度和剩余高度，子元素.item也使用flex属性来占据剩余高度并按照纵向布局排列。

最后，在页面中使用rem作为单位来设置元素的大小和间距，例如：

<template>
  <div class="content">
    <div class="item">
      <div class="item-title">Item 1</div>
      <div class="item-arrow"></div>
    </div>
    <div class="item">
      <div class="item-title">Item 2</div>
      <div class="item-arrow"></div>
    </div>
    <div class="item">
      <div class="item-title">Item 3</div>
      <div class="item-arrow"></div>
    </div>
  </div>
</template>

<style>
  .content {
    padding: 10px;
  }
  
  .item {
    margin-bottom: 10px;
  }
  
  .item-title {
    font-size: 1.6rem;
  }
  
  .item-arrow {
    width: 2rem;
    height: 2rem;
  }
</style>

在这个例子中，使用rem作为单位来设置.item-title的字体大小和.item-arrow的宽度和高度，它们的大小会根据根元素的字体大小自适应地改变。