Cordova/Phonegap应用外悬浮窗实现方案咨询

Hey Gilles, great question! Replicating Floatube's floating window + background video playback functionality in a Cordova app is totally feasible—though you’ll need to account for platform-specific differences, since Floatube is built specifically for Android. Let’s break down exactly how to approach this:

First things first: yes, you can build this. Android allows system-level floating windows with the right permissions, and Cordova can hook into these native APIs. iOS has stricter restrictions but offers Picture-in-Picture (PiP) for video, which delivers a similar user experience (even if it’s not a fully customizable floating window like Android’s). For a YouTube-focused app, the key is keeping video playback alive when the app is backgrounded and rendering that playback in an overlay outside the main app context.

Let’s split this into Android and iOS steps, since their systems handle floating content very differently:

Android: Full Floating Window Support #

• Request System Alert Window Permission: This non-negotiable permission lets your app draw windows over other apps. In Cordova, you can either use a pre-built plugin like cordova-plugin-floating-window or write a custom plugin to request the SYSTEM_ALERT_WINDOW permission. Note: On Android 6.0+, you can’t grant this via a standard runtime dialog—you’ll need to prompt users to enable it manually through the app’s system settings.
• Build a Native Floating Video Player: Use Android’s WindowManager to create a floating VideoView or ExoPlayer instance. Your custom Cordova plugin should expose methods to launch this floating view, send playback controls (play/pause/seek), and dismiss it. Critical: This floating view needs to be tied to a background service, not the main Cordova webview—otherwise, playback will stop when the webview is paused.
• Keep Playback Alive in Background: By default, Cordova pauses the webview when the app is sent to the background. To avoid this, move video playback to a native foreground service. You can use cordova-plugin-background-mode to help keep your app’s process alive, but the actual video logic must live in native code to bypass system restrictions.
• Integrate YouTube Content: Ditch the web-based YouTube player—web players will pause when the webview is backgrounded. Instead, use the YouTube Android Player API to embed videos directly in your native floating view. This gives you full control over playback persistence.

iOS: Picture-in-Picture (PiP) Alternative #

iOS doesn’t allow arbitrary floating windows, but it supports official PiP for video, which is the closest equivalent:

• Enable PiP via Plugin or Custom Code: Use a plugin like cordova-plugin-pip or build a custom plugin to access iOS’s PiP API. This lets users minimize the video to a floating window that stays visible across apps and the lock screen.
• Configure Background Modes: Update your config.xml to enable background audio playback (required for PiP to work):

  <platform name="ios">
      <config-file parent="UIBackgroundModes" target="*-Info.plist">
          <array>
              <string>audio</string>
          </array>
      </config-file>
  </platform>
  

• Optimize WebView for Video: Use Cordova’s default WKWebView (instead of the older UIWebView) and ensure your YouTube embeds use HTML5 video with PiP enabled. For more control, integrate the YouTube iOS Player API directly into your native code.

Cross-Platform Tips #

• Custom Plugins Are Your Friend: Most pre-built Cordova plugins only cover basic floating window/PiP functionality. To match Floatube’s polished experience, you’ll likely need to extend these plugins or write custom native code to bridge web-based controls (like your app’s UI) with the native floating player.
• Battery Optimization Workarounds: On Android, manufacturers like Xiaomi and Huawei have aggressive battery-saving features that can kill background services. Add a prompt in your app to guide users to exempt your app from these optimizations. On iOS, PiP can only be triggered by user interaction (you can’t launch it programmatically without a tap or gesture).
• Bridge Web and Native: Use Cordova’s cordova.exec method to send commands from your web app (e.g., "pause video") to the native floating player, and sendPluginResult to send playback status updates back to the web UI.

With some native plugin development and attention to platform quirks, you can absolutely build an app that matches Floatube’s core functionality. Start small: get basic floating playback working on Android first, then add iOS PiP support, and refine the user experience from there.

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