uni-app视频播放组件

Question

我使用vue2 uni-app框架中的video组件封装了一个播放器插件，支持播放m3u8和MP4等常规视频文件，目前PC端、苹果手机、QQ浏览器中安卓模拟器上测试都没有问题，就是在安卓手机上播放视频的时候，视频会被强制拉伸为横屏播放，就算我把播放器宽度设置为100px、高度300px，视频也会被拉伸成宽度100px、高度30px。
这是PC谷歌浏览器

这是PC端QQ浏览器：

这是安卓手机端：

我手机端都是直接在微信中点击链接打开的。

**有哪位遇到过这种问题吗？求解决办法 **

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

你使用 Vue2 uni-app 框架中的 video 组件封装了一个播放器插件，支持播放 m3u8 和 MP4 等常规视频文件。然而，在安卓手机上，视频播放出现问题。

可能原因

1. 安卓手机上的浏览器或系统版本问题
2. 视频文件格式或编码问题
3. uni-app 或 video 组件的兼容性问题

解决方案

1. 检查安卓手机上的浏览器或系统版本：确保安卓手机上的浏览器或系统版本是最新的。
2. 检查视频文件格式或编码：确保视频文件格式和编码是支持的。
3. 检查uni-app或video组件的兼容性：检查 uni-app 或 video 组件的文档和示例，确保在安卓手机上是支持的。
4. 尝试使用其他视频播放组件：如果以上方法都没有解决问题，可以尝试使用其他视频播放组件。

核心代码

// uni-app 中的 video 组件
<video id="video" :src="videoUrl" :controls="true" :autoplay="true"></video>

// 封装的播放器插件
import video from './video.vue'

export default {
  components: { video },
  data() {
    return {
      videoUrl: '视频文件地址'
    }
  }
}

注意

上述代码仅为示例，具体实现可能需要根据实际情况进行调整。