Ionic 6 Android 11播放MP4视频遇权限拒绝问题求助

1. 修正权限配置 #

Android 11 对媒体权限做了细分，你当前仅申请了图片读取权限，需要补充视频读取权限，同时适配外部存储和HTTP资源访问：

<application ...
    android:requestLegacyExternalStorage="true"
    android:usesCleartextTraffic="true"> <!-- 加载HTTP外部视频时必须添加 -->
...
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/> <!-- 新增视频权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

2. 动态申请权限 #

Android 6.0+ 要求动态申请权限，仅在Manifest配置不生效。使用@capacitor/permissions插件实现：

• 安装插件：

npm install @capacitor/permissions
npx cap sync

• 在页面代码中添加权限申请逻辑（home.page.ts）：

import { Permissions, PermissionState } from '@capacitor/permissions';

async requestPermissions() {
  const storagePerm = await Permissions.check({ name: 'storage' });
  if (storagePerm.state !== PermissionState.Granted) {
    const result = await Permissions.request({ name: 'storage' });
    if (result.state !== PermissionState.Granted) {
      console.error('存储权限申请失败，无法访问视频资源');
    }
  }
}

ionViewWillEnter() {
  this.requestPermissions();
}

3. 配置WebView访问权限 #

Capacitor WebView默认可能限制本地资源访问，在capacitor.config.ts中添加配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的APP ID',
  appName: '你的APP名称',
  webDir: 'www',
  android: {
    allowFileAccess: true,
    allowContentAccess: true,
    webViewAssetPath: 'assets'
  }
};

export default config;

4. 本地视频路径修正 #

确认assets内视频路径格式正确，去掉开头的/避免解析错误：

<source src="assets/sample5s.mp4" type="video/mp4"/>

5. 调试排查 #

用Chrome远程调试（chrome://inspect）查看WebView控制台日志，区分是本地资源还是外部iframe视频触发的权限错误，针对性调整配置。

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