uni-app 生成的h5页面 在 ios 原生应用中 video 自动播放失效，禁止全屏播放失效

uni-app 生成的h5页面 在 ios 原生应用中 video 自动播放失效，禁止全屏播放失效

类别 信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 win10
HBuilderX 正式版
版本号 3.8.12
浏览器平台 手机系统浏览器
项目创建方式 HBuilderX

示例代码：

<video id="myVideo2" @loadedmetadata="loadedmetadata2" class="video1" src="XXXXX"  
controls='false'
poster="@/static/image/6.jpg"
webkit-playsinline="true"
playsinline="true"
autoplay="true"
loop muted
x5-video-player-fullscreen="false"
x5-playsinline
object-fit="cover"
></video>

操作步骤：

  • 打开应用，视频不会自动播放，切换页面回来之后自动全屏播放

预期结果：

  • 打开IOS应用，视频自动播放，并且是在特定区域播放，禁止全屏播放

实际结果：

  • 打开应用，视频不会自动播放，切换页面回来之后自动全屏播放

bug描述：

要实现一个原生套壳打包Safari浏览器的IOS APP，具体功能为h5页面，h5页面是uni-app打包生成，video自动播放失效，禁止全屏播放失效。但是在手机Safari浏览器里正常


更多关于uni-app 生成的h5页面 在 ios 原生应用中 video 自动播放失效，禁止全屏播放失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 生成的h5页面 在 ios 原生应用中 video 自动播放失效，禁止全屏播放失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于iOS原生应用中uni-app H5页面video自动播放和全屏控制失效的问题，这是iOS WebView的常见限制。以下是关键点分析：

  1. 自动播放问题：
  • iOS Safari/WebView默认禁止自动播放，必须添加muted属性并配合playsinline
  • 建议代码调整为：autoplay muted playsinline webkit-playsinline
  1. 全屏控制问题：
  • iOS WebView会忽略x5相关属性（这是微信浏览器专用）
  • 确保同时使用iOS专用属性：playsinline webkit-playsinline
  1. 特殊处理建议：
<video 
  autoplay
  muted
  playsinline
  webkit-playsinline
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"
  x5-video-orientation="portrait"
  style="object-fit:cover">
</video>
  1. 注意事项：
  • 首次加载可能仍需用户交互触发播放
  • 切换页面后全屏是iOS默认行为，需要通过WebView配置禁用

建议检查原生WebView配置，确保允许内联播放。如果使用WKWebView，需要设置：

webView.configuration.allowsInlineMediaPlayback = YES;
回到顶部