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

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

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

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

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

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

相关问题

uniapp swiper如何根据内容自适应高度

Uniapp Swiper 组件默认高度是固定的，无法根据内容自适应高度。但是可以通过以下两种方式实现：

1. 使用 scroll-view 包裹 swiper，设置 scroll-view 的高度为内容高度

<scroll-view style="height: {{scrollHeight}}px;">
  <swiper :style="{height: swiperHeight + 'px'}">
    <swiper-item v-for="(item, index) in list" :key="index">
      {{item.content}}
    </swiper-item>
  </swiper>
</scroll-view>

export default {
  data() {
    return {
      list: [
        { content: '第1页' },
        { content: '第2页' },
        { content: '第3页' },
      ],
      swiperHeight: 0,
      scrollHeight: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this).select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
        uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect(data => {
          this.scrollHeight = data.height
        }).exec()
      }).exec()
    })
  }
}

2. 使用自定义组件配合 swiper 实现自适应高度

<!-- my-swiper 组件 -->
<template>
  <swiper :style="{height: swiperHeight + 'px'}">
    <swiper-item v-for="(item, index) in list" :key="index">
      {{item.content}}
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      swiperHeight: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this).select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
        this.$emit('swiperHeightChange', data.height)
      }).exec()
    })
  }
}
</script>

<!-- 使用 my-swiper 组件 -->
<template>
  <my-swiper :list="list" @swiperHeightChange="swiperHeight = $event"></my-swiper>
</template>

<script>
import MySwiper from './my-swiper'

export default {
  components: {
    MySwiper,
  },
  data() {
    return {
      list: [
        { content: '第1页' },
        { content: '第2页' },
        { content: '第3页' },
      ],
      swiperHeight: 0,
    }
  },
}
</script>

以上两种方式都可以实现 Uniapp Swiper 组件根据内容自适应高度，选择使用哪种方式根据实际情况选择。

uniapp scroll-view 高度自适应

uniapp中的scroll-view组件可以通过以下方法实现高度自适应：
1. 在scroll-view组件上添加class属性，并设置为"chat-main"，同时添加scroll-y属性并设置为true，这样可以启用纵向滚动。
2. 使用行内样式的方式为scroll-view组件设置高度，可以通过计算得出所需的高度。
3. 在onLoad生命周期函数中使用uni.getSystemInfo方法获取手机系统信息，并通过res.statusBarHeight获取手机状态栏高度。
4. 根据视口高度和其他组件的高度计算scroll-view的剩余高度，将其赋值给scrollviewHeight变量。
5. 将scrollviewHeight绑定到scroll-view组件的style属性上，实现高度自适应。