Cordova 12中如何使用HTML5 video标签播放外部视频？

问题背景 #

在Cordova 12（cordova-android@12.0.1）环境下，尝试用HTML5 video标签播放外部MP4视频，经多小时搜索仍未解决。项目运行在Android 11设备上时，视频区域显示损坏图标，且需求为内联播放（无法使用全屏播放的cordova-plugin-video-player插件）。

已执行操作步骤 #

• 创建新项目：

  $ cordova create VideoTest com.example.videotest VideoTest
  Creating a new cordova project.
  $ cd VideoTest
  $ cordova platform add android
  Using cordova-fetch for cordova-android
  Adding android project...
  Creating Cordova project for the Android platform:
      Path: platforms/android
      Package: com.example.videotest
      Name: VideoTest
      Activity: MainActivity
      Android Target SDK: android-33
      Android Compile SDK: 33
  Subproject Path: CordovaLib
  Subproject Path: app
  Android project created with cordova-android@12.0.1
  

• 在config.xml中添加内联播放配置：

  <?xml version='1.0' encoding='utf-8'?>
  <widget id="com.example.videotest" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
      <name>VideoTest</name>
      <description>Sample Apache Cordova App</description>
      <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
          Apache Cordova Team
      </author>
      <content src="index.html" />
      <allow-intent href="http://*/*" />
      <allow-intent href="https://*/*" />
      <preference name="AllowInlineMediaPlayback" value="true"/>
  </widget>
  

• 在index.html中添加video标签：

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
          <meta http-equiv="Content-Security-Policy" content="default-src *; media-src *;style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
          <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
      </head>
      <body>
          <video controls preload="metadata">
              <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
              Video not supported.
          </video>
  
          <script src="cordova.js"></script>
          <script src="js/index.js"></script>
      </body>
  </html>
  

问题现象 #

项目构建运行在Android 11设备上时，视频区域显示损坏图标，无法正常加载播放。

解决方案 #

1. 配置HTTP明文访问权限 #

Android 9及以上默认禁止HTTP明文请求，若视频地址为HTTP协议，需在config.xml中添加以下配置：

<platform name="android">
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>
</platform>

2. 补充Video标签内联播放属性 #

Android WebView需额外属性支持内联播放，修改video标签：

<video controls preload="metadata" playsinline webkit-playsinline>
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    Video not supported.
</video>

• playsinline：标准HTML5内联播放属性
• webkit-playsinline：兼容旧版Android WebView

3. 优化内容安全策略（CSP） #

确保CSP完全允许媒体资源加载，可临时放宽测试：

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; media-src * blob: data:;">

同时确认视频URL可在浏览器正常访问，排除资源本身问题。

4. 更新WebView配置（可选） #

安装插件更新Android WebView版本，提升兼容性：

cordova plugin add cordova-plugin-androidx-webview

并在config.xml添加偏好设置：

<preference name="MediaPlaybackRequiresUserAction" value="false" />

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