HarmonyOS devices: Safe area insets not respected, controls overlap system navigation bar

[wang14525-cpu]

Description

Issue Summary:
Video.js does not properly handle safe area insets on HarmonyOS devices, causing the player controls and navigation buttons to overlap with the system navigation bar at the bottom of the screen.

Expected Behavior:
The video player controls should respect the system safe area insets (similar to iOS's env(safe-area-inset-bottom)) and adjust their position to avoid overlapping with HarmonyOS's navigation bar.

Actual Behavior:
The bottom controls and custom navigation buttons are rendered underneath the HarmonyOS system navigation bar, making them partially or fully inaccessible to users.

Context:
I'm developing mini-programs (lightweight apps) for the HarmonyOS ecosystem and encountered this issue when integrating Video.js. HarmonyOS has 900+ million active devices, primarily in the Chinese market, and uses a gesture navigation bar similar to modern iOS/Android devices.

Root Cause:
Video.js's browser detection (browser.js) does not recognize HarmonyOS devices. As a result:
HarmonyOS is not detected as a mobile platform (IS_ANDROID = false, IS_IOS = false)
Safe area handling logic designed for iOS/Android is not applied to HarmonyOS
The player treats HarmonyOS devices as desktop browsers

HarmonyOS User Agent Example:
Mozilla/5.0 (Linux; HarmonyOS 5.0.0; NOH-AN00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36

Note: The UA contains HarmonyOS and Mobile, but lacks the Android or iPhone keywords that Video.js currently checks for.

Reduced test case

https://codepen.io/Zheng-Wang-the-scripter/pen/xbVaQWm

Steps to reproduce

1. Open the test case URL on a HarmonyOS device (phone or tablet with system navigation bar enabled)
2. Play the video to show the control bar
3. Observe that the bottom controls overlap with the system navigation bar
4. Try to tap the play/pause or fullscreen buttons at the bottom - they are partially obscured
5. Check browser console: videojs.browser.IS_ANDROID returns false (should be true or have separate IS_HARMONYOS flag)

Errors

videojs.browser.IS_ANDROID = false // Expected: true (or IS_HARMONYOS = true)
videojs.browser.IS_IOS = false // Correct
videojs.browser.IS_IPHONE = false // Expected: true for phones with "Mobile" in UA
videojs.browser.TOUCH_ENABLED = true // Correct

What version of Video.js are you using?

v8.23.4

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Uniapp (WeChat WebView)

What OS(es) and version(s) does this occur with?

HarmonyOS 5.1.1

[mister-ben]

Is your issue resolved if you patch IS_ANDROIDto truebefore creating a player? The current styles don't use env(safe-area-inset-top) etc for Android or iOS either, so I'd suspect not.
Your codepen is broken so I'm not sure exactly what your case is. In-page/fullscreen? Screenshots would be useful for those who don't have HarmonyOS.

[wang14525-cpu]

Is your issue resolved if you patch IS_ANDROIDto truebefore creating a player? The current styles don't use env(safe-area-inset-top) etc for Android or iOS either, so I'd suspect not. Your codepen is broken so I'm not sure exactly what your case is. In-page/fullscreen? Screenshots would be useful for those who don't have HarmonyOS.

The issue is that the progress bar conflicts with the navigation bar on HarmonyOS devices, making it impossible to click pause or interact with the progress bar.

Patching IS_ANDROID to true doesn't help since the current styles don't use env(safe-area-inset-*) anyway.

HarmonyOS likely needs specific layout adjustments to handle its navigation bar behavior properly. Screenshot shows the positioning issue.