uni-app苹果手机不显示video基础控件

uni-app苹果手机不显示video基础控件

开发环境 版本号 项目创建方式
Mac 10.15.6 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.15.6

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：苹果 12 苹果 13

页面类型：vue

打包方式：云端

App下载地址或H5网址：
[https://apps.apple.com/cn/app/flow-%E5%86%A5%E6%83%B3/id1557844446](https://apps.apple.com/cn/app/flow-%E5%86%A5%E6%83%B3/id1557844446)

示例代码：

<video
@fullscreenchange=“bindfullscreenchange”
v-if=“sure”
class=“videoTop”
:autoplay=“sure”
:title=“videoData.title”
:src=“videoData.url”
enable-auto-rotation
:poster-for-crawler=“videoData.imgUrl”
:controls=“true”
show-play-btn=“true”
show-center-play-btn=“true”
:object-fit=“fit”

```` 操作步骤： 播放视频，显示基础控件（暂时尝试了 苹果12 15.1 系统 苹果13 15.1 系统 ，苹果12 14.8 系统有这个问题，苹果x （包括）以下没有问题）

预期结果： 显示基础控件

实际结果： 未显示基础控件

bug描述： video 组件不显示 控件（播放、暂停、全屏按钮等等）；


更多关于uni-app苹果手机不显示video基础控件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app苹果手机不显示video基础控件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hello 模版 手机是显示控件的，但是自己本地的代码用 苹果x 苹果 8p 没问题，12 以上就有问题。

回复 zhao阝: 示例代码hello uni-app正常，那你需要排查下自己代码问题。

请问解决了吗，我这边更新了 3.2.9之后出现相同的问题 我视频组件是放在subNvue里面，其他场景还没试过。

项目现在在改版，只是发现了这个问题，暂时没去改

回复 zhao阝: 好的 谢谢

在iOS 15及以上版本的设备上，video组件的基础控件（播放/暂停、进度条、全屏按钮等）不显示，这通常是由于iOS系统自身的限制或策略导致的。以下是可能的原因和解决方案：

1. iOS 15+ 的自动播放策略

  • 问题：iOS 15+ 对视频自动播放有更严格的限制。如果设置了 autoplay="true"，系统可能会自动隐藏控件以提供“沉浸式体验”。
  • 解决方案：尝试将 autoplay 设置为 false，或通过用户交互（如点击）触发播放。例如：
    <video :controls="true" :autoplay="false" ...></video>
    或通过事件触发：
    <video ref="videoRef" :controls="true" @click="playVideo" ...></video>

    methods: {
  playVideo() {
    this.$refs.videoRef.play();
  }
}

2. controls 属性兼容性

  • 问题：在部分iOS版本中，controls 属性可能默认失效。
  • 解决方案：确保 controls 设置为 true（代码中已正确设置）。如果问题依旧，尝试强制设置 :controls="true" 并检查是否有CSS样式覆盖了控件。

3. CSS样式干扰

  • 问题：自定义CSS可能隐藏了原生控件（如 z-index、opacity 或 display 属性）。
  • 解决方案：检查 .videoTop 类的样式，确保未对控件区域进行遮挡或隐藏。例如：
    .videoTop {
  /* 避免以下样式 */
  overflow: hidden;
  z-index: -1;
}

4. 使用 uni.createVideoContext 自定义控件

  • 如果原生控件始终不显示，可考虑隐藏原生控件并自定义UI：
    <video ref="videoRef" :controls="false" @play="onPlay" ...></video>
<button @click="togglePlay">播放/暂停</button>

    methods: {
  togglePlay() {
    const videoContext = uni.createVideoContext('videoRef', this);
    videoContext.play(); // 或 pause()
  }
}
回到顶部