uni-app使用video组件播放hls的视频源时播放画面不完整

uni-app使用video组件播放hls的视频源时播放画面不完整

开发环境 版本号 项目创建方式
Mac 15.5 HBuilderX

示例代码：

<video id="myVideo"  
         src="https://xxx.com/xxx.m3u8"  
         :play-strategy="2"  
         autoplay  
         controls  
         style="width: 750rpx; height: 1333.3rpx;"  
></video>

操作步骤：

在安卓14的安卓手机上使用video组件播放m3u8视频，切换暂停和播放按钮

预期结果：

画面不会缩放

实际结果：

播放时画面不全，暂停时显示完整画面，表现为暂停和播放时画面缩放

bug描述：

使用video组件播放hls的视频源（m3u8）的问题 播放时的画面不全，竖屏的视频会隐去右边一部分，横屏时会隐去下面的一部分 暂停时的画面是完整的，表现出来就是画面会有放大和缩小 PS：mp4的格式没有问题，华为mate20pro上面播放m3u8也没有问题


更多关于uni-app使用video组件播放hls的视频源时播放画面不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app使用video组件播放hls的视频源时播放画面不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的HLS视频播放适配问题，主要与视频宽高比和容器尺寸不匹配有关。建议尝试以下解决方案：

  1. 设置object-fit属性：
<video 
  id="myVideo"  
  src="https://xxx.com/xxx.m3u8"  
  :play-strategy="2"  
  autoplay  
  controls  
  style="width: 750rpx; height: 1333.3rpx; object-fit: contain"  
></video>
  1. 或者尝试cover模式：
style="width: 750rpx; height: 1333.3rpx; object-fit: cover"
  1. 也可以考虑动态计算视频宽高比：
// 在onLoad事件中获取视频原始尺寸
onLoad(e) {
  const {width, height} = e.detail
  this.aspectRatio = width/height
  // 根据宽高比调整容器尺寸
}
回到顶部