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

如果你想在 uniapp 中实现视频播放器的固定宽度和自适应高度，可以尝试使用 `uni-app` 的 `uni-mp-video` 组件。该组件是基于微信小程序的 `video` 组件封装的，具有良好的跨平台兼容性。实现方法如下：

1. 在你的 `vue` 文件中引入 `uni-mp-video` 组件：

<template>
  <view>
    <uni-mp-video :src="videoSrc" controls></uni-mp-video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'your_video_src'
    }
  }
}
</script>

2. 在 `style` 中设置视频播放器的宽度和高度：

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

这样，你就可以实现一个固定宽度、自适应高度的视频播放器了。

相关问题

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属性上，实现高度自适应。