Video rendering Issue using HTML5 video tag In Android platform

My team and I created a social media app in ionic version 4. The videos are fetched from an S3 bucket to the Application. The Application was running fine till yesterday. Today We are facing issue in loading videos. Instead of the video file getting loaded I am seeing black boxes and the application totally freezes and starts flickering, when I load Image files from the S3 bucket the application runs fine.

I am not seeing this Issue in iOS version of the application where the videos are loading properly and the video is rendered via HTML5 video tag.These issues occur in some Android version 10 devices but not in Android version 9,
Video link of issue: https://lh3.googleusercontent.com/XL-mNnKdyqfjaSX41cRokvJe6_O02b72eEbc6Bz7tWQc4Qz8Qimx94eC8x4sRRz7nWccN56crwsSKA=m37

Versions:

Ionic:

Ionic CLI : 5.4.6 (C:\Users\TRIO\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.8
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 4.1.3, (and 22 other plugins)

Utility:

cordova-res : 0.8.1
native-run : 0.2.9 (update available: 0.3.0)

System:

Android SDK Tools : 26.1.1 (C:\Users\TRIO\AppData\Local\Android\Sdk)
NodeJS : v12.11.1 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10

any help would be great Thanks in advance.

My users have been encountering this as well. A few notes:

  • I am running PhoneGap; this appears to be a Cordova-wide issue.
  • Specifically, it appears to be associated with Cordova Android 6.1.3 to 8.1.0 (your version), as it immediately started appearing for existing users when they upgraded the app from our Cordova Android 6.1.2 version to an upgraded Cordova 9.0 version.
  • Haven’t yet isolated it to a specific Chrome or Android version (it appears to exist on Android 9 and 10, at a minimum). I suspect that it is related to the latest Chrome version since I haven’t this post is the only instance of this error that I’ve seen on the internet so far.

Would love to see if we can knock this issue out together; if anyone else has any thoughts that would be awesome

Cordova:

Cordova CLI : PhoneGap 7.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins :
c.fovea.cordova.purchase
com.hutchind.cordova.plugins.streamingmedia
com.phonegap.plugins.videoplayer
com.rjfun.cordova.plugin.nativeaudio.NativeAudio
cordova-plugin-device
cordova-plugin-dialogs
cordova-plugin-googleplus
cordova-plugin-health
cordova-plugin-inapppurchase
cordova-plugin-splashscreen
cordova-plugin-whitelist
de.appplant.cordova.plugin.local-notification
nl.x-services.plugins.socialsharing
org.apache.cordova.inappbrowser
org.apache.cordova.network-information

System:

Android SDK Tools : 30.0.1
NodeJS : v14.5.0
npm : 6.14.5
OS : MacOS 10.15.4

We are unable to replicate the issue, so if we actually able to consistently replicate it we feel confident we’d be able to figure out what’s going on. Given that it appears to be associated with Cordova version, we feel like we could just progressively update Cordova to zero in on at least the version that the problem is associated with.

  • What other testing setups have you tried?
  • Are there setups where you haven’t replicated the issue?
  • Is it exclusively Samsung and OnePlus devices? Our only users with the issue are Samsung (Galaxy A5, S8, and S8+, so far)
  • What Webview->Chrome version are you replicating it on? Our users appears to be Chrome 83 but we’re unable to replicate it on that version

Happy to answer any questions you may have concerning the work that we’ve done

We were able to consistently replicate these issue on android Version 10 and chrome version 84 across many brands (samsung,oneplus,redmi). The issue occurs in samsung m20 chrome version 79 & android 10,redmi note 8 pro chrome version 81 and android version 10. The flickering issue did not occur in android versions 7 8&9,irrespective of their chrome versions.

The issues exists in both Ionic version 4&5 we tried using capacitor instead of cordova to resolve this but still the issue persists.
Apart from our main project we created simple POC’s that just load videos from the s3 bucket and issue is replicable in them.

Versions tested
capacitor v2,
cordova:V8,
ionic version:V5,V4,
Android version V10,V9,V8 ,V7

After experimenting with cordova, capacitor and iframe tag we understood that the issue was associated with video loading and rendering. Android system webview, a system component powered by Chrome that allows Android apps to display web content was causing this issue.

Most Samsung mobiles got automatically updated to the latest version of Android system webview.
It’s latest update caused this issue. Other mobile phones which also got updated to the latest version of Android system webview had the issue. Uninstalling it eliminated the video blackout/flickering issue in our application. I hope this resolves your issue too.

1 Like

Hello Neela,Can you please share how you handled this issue in your code as we can not inform customers to uninstall latest version webview?

Hi Shreegan,
We are yet to find a solution for this issue. In the mean time what we have found is by August 25th there will be stable release in Chrome and Android system webview. In version 85 this issue will be resolved.

1 Like

if you don’t mind can you please tell me uninstalling what resolved the issue. is it ionic-webview plugin?