Ionic-Angular中HTML5视频标签全屏模式下控件无法点击

你遇到的这个问题我之前帮不少开发者排查过——在Ionic Hybrid应用里用HTML5 <video>标签加载视频，普通屏幕模式下运行完全正常，但切换到全屏后，视频控件明明看得见，却死活点不动，而且只在Android平台出现，浏览器端完全没问题，iOS还没测试对吧？

先把你给出的代码补全一下方便参考：

<div class="video-container">
  <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video>
</div>

下面给你几个针对性的解决方案，按优先级推荐：

1. 先排查Ionic的层级与触控拦截问题 #

Android平台的WebView里，Ionic的ion-content等组件有时候会因为z-index设置或者默认的触控事件拦截，导致全屏视频的控件被“隐形遮挡”——视觉上显示，但点击事件被上层元素吃掉了。

你可以先试试给视频容器和视频元素加高z-index，强制开启触控事件：

.video-container {
  position: relative;
  z-index: 9999; /* 确保容器在最上层 */
}

.video-container video {
  z-index: 10000;
  pointer-events: auto !important; /* 强制允许触控 */
}

另外，还可以监听全屏切换事件，临时让ion-content不拦截触控：

// 在页面的ngOnInit或者构造函数里添加监听
ngOnInit() {
  // 适配不同浏览器的全屏事件
  const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'];
  
  fullscreenEvents.forEach(event => {
    document.addEventListener(event, () => {
      const contentElement = document.querySelector('ion-content');
      if (!contentElement) return;
      
      // 进入全屏时禁用ion-content的触控拦截
      if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
        contentElement.style.pointerEvents = 'none';
      } else {
        // 退出全屏时恢复
        contentElement.style.pointerEvents = 'auto';
      }
    });
  });
}

这个方案改动最小，大概率能解决问题。

2. 改用Ionic原生视频插件 #

如果上面的方法不行，那可能是HTML5 video在Android WebView里的兼容性bug导致的。这时候可以试试Ionic官方的原生视频插件@ionic-native/video-player，它调用的是Android系统原生的视频播放器，控件交互都是系统级的，基本不会出现点击无效的问题。

步骤如下：

1. 安装插件：

ionic cordova plugin add cordova-plugin-video-player
npm install @ionic-native/video-player

2. 在模块里导入并声明：

// 在app.module.ts或对应的页面模块里
import { VideoPlayer } from '@ionic-native/video-player/ngx';

@NgModule({
  providers: [VideoPlayer]
})
export class YourModule { }

3. 在页面里使用：

import { VideoPlayer } from '@ionic-native/video-player/ngx';

constructor(private videoPlayer: VideoPlayer) { }

playVideo() {
  this.videoPlayer.play('http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4')
    .then(() => console.log('视频播放完成'))
    .catch(err => console.error('播放出错:', err));
}

3. 检查Android WebView配置与版本 #

有时候旧版本的Android WebView会有视频全屏的bug，你可以：

• 确保设备上的Android System WebView是最新版本（在应用商店里更新）
• 在config.xml里添加相关配置，优化视频播放：

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="android-webview-settings" value="allowFileAccess=true,allowContentAccess=true" />

4. 自定义视频控件（终极方案） #

如果以上方法都解决不了，那可以考虑放弃原生的controls属性，自己实现一套视频控件。这样你能完全把控控件的层级和交互逻辑，彻底避免被系统或Ionic元素拦截的问题。

示例代码：

<div class="custom-video-container" style="position: relative;">
  <video #customVideo src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>
  <!-- 自定义控件层 -->
  <div class="custom-controls" style="position: absolute; bottom: 0; left: 0; right: 0; z-index: 10001; padding: 10px; background: rgba(0,0,0,0.5);">
    <button (click)="togglePlay(customVideo)" style="color: white;">{{ customVideo.paused ? '播放' : '暂停' }}</button>
    <button (click)="toggleFullscreen(customVideo)" style="color: white; margin-left: 10px;">全屏</button>
  </div>
</div>

对应的TS逻辑：

togglePlay(video: HTMLVideoElement) {
  video.paused ? video.play() : video.pause();
}

toggleFullscreen(video: HTMLVideoElement) {
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => console.error('进入全屏失败:', err));
  } else {
    document.exitFullscreen();
  }
}

内容的提问来源于stack exchange，提问作者Hoang Nguyen