HTML5 no video only audio playing in android WebView

Question

I have a webpage which has a html5 video and css3 animations. The web page plays perfectly in the browser in the android device.

The issue is, the animations are really laggy and glitchy and jumpy when using hardwareAccelerated, but the video plays fine. When I use the software layerType the animations play perfectly but the video doesn't play(the audio does however) as its not supported.

I've tried :

hardwareAccelerated in manifest
web_view.setLayerType(View.LAYER_TYPE_HARDWARE, null)
web_view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
CrossWalk XWalkView

I've tried these solutions too Android webview slow performance, Android webview slow , Android webview loading data performance very slow and more

I looked at the cordova webView code and tried this

        webView.setInitialScale(0)
        webView.isVerticalScrollBarEnabled = false
        // Enable Javascript
        val settings = webView.settings
        settings.javaScriptEnabled = true
        settings.javaScriptCanOpenWindowsAutomatically = true
        settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NORMAL

this line

        webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null)

fixes the animations perfectly but from the comments in Android webview slow it says html5 video is not supported.

Any suggestions on how to get the WebView to perform better? I know the url works as it is perfect in the browser

Have you saw this answer: https://stackoverflow.com/a/3205501/4079010 — Rahul Khurana, Sep 17 '19 at 10:39
yes I have, but thanks for sharing. The video plays perfectly fine on web and iOS and android browser. And it plays fine before I add webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null) but the CSS animations are so laggy in the WebView — nt95, Sep 17 '19 at 10:45

score 0 · Answer 1 · answered Sep 24 '19 at 12:12

0

We had the same problem. Try set the webview height and width to a specific value.

FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                "ScreenWidth",
                "ScreenHeight");

This problem came with chrome webview update 77

answered Sep 24 '19 at 12:12

Daniel Pína

348
2
7

I've just tried this and still getting the same issues :( there are a lot of animations but they play fine in browser. Have you any other advise? – nt95 Sep 24 '19 at 13:15
we also removed line for "setInitialScale". So maybe thats the magic. – Daniel Pína Sep 24 '19 at 13:29
I've stripped it right back and the only thing we're using is webChromeClient, layoutParams(as you described above), javascriptEnabled and a javascriptInterface so we aren't setting initialScale anymore either – nt95 Sep 24 '19 at 13:33

score 0 · Accepted Answer · answered Jul 06 '20 at 09:38

For us, the answer was to toggle between hardware and software acceleration. At the start when the animations where intense we used:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null)

and then when the video began to play we observed and toiled to

webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)

This allowed the animations to play perfectly with software acceleration but fixed the html5 issue by flicking back to hardware. I implemented a javascript interface to pass when to toggle back from the web view to the android app. Hopefully this helps someone!

HTML5 no video only audio playing in android WebView

2 Answers2

Linked