iOS 设备上使用原生 video 全屏播放出现黑屏带声音的原因分析与解决

一. 前言

背景

在某翻牌 h5 项目中，视频播放功能采用了原生 video 元素。 随着需求的变更，增加了全屏播放控件。在 Android 设备上一切正常，但在 iOS 设备上点击全屏放大控件后，出现了“有声音无画面”的黑屏现象。 为什么同样的代码在 Android 设备上运行良好，而在 iOS 设备上却出现了问题呢？

二. 缘由

为了找出问题的根源，进行了以下测试：

1. 测试视频URL：通过反复测试确认视频本身的格式没有问题，无论是直接打开视频 url ，还是将视频放在其他项目中，都能正常播放和全屏显示。

2. 排查代码：对比了当前项目与之前项目中播放视频的代码逻辑，逐步注释掉部分代码，最终发现问题出现在一段全局 click 事件的监听代码中。 这段代码在回调函数中对视频元素进行了 display="none" 的操作。

3. 初步推测：怀疑 iOS 设备在用户点击 video 元素的全屏控件时，触发了全局 click 事件，导致视频元素被隐藏，从而出现黑屏现象。

三. 结论

通过以上排查和分析，得出了以下结论：

• 当用户点击 video 元素自带的全屏控件时：
  • 在 iOS 浏览器内核的环境下，可能会触发全局 click 事件，从而导致视频元素被隐藏，出现有声音但无画面的黑屏情况。
  • 在 Android 浏览器内核的环境下，点击全屏控件不会触发全局 click 事件，因此视频播放正常。

尽管还没有完全验证这一推测，但这为进一步解决问题提供了方向。