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图片自适应宽度

在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的宽度和高度，它们的大小会根据根元素的字体大小自适应地改变。