Search code examples
androidandroid-webviewhtml5-video

Android WebView video plays, audio fine, but shows no image - ok in browser

I have a strange behaviour when trying to play back a video in an Android WebView. Whilst the video actually does play, and the sound is audible, there's only a white/ blank screen where the video should be. It works perfectly fine using the native browser.

Not even in a new very basic, new Android project (using a new, empty emulator), a video is displayed. Also tried with the 3gp format and using some recent SDK (API 27). Also there is no difference among emulator (various devices) and the physical device. I also had no success opening different websites containing videos (websites are displayed, together with the video - sound available, but no image).

The video control is visible and can be clicked (unless set to autoplay, where it is immediately played back).

Error messages from the log:

E/chromium: [ERROR:gl_surface_egl.cc(264)] eglChooseConfig failed with error EGL_SUCCESS
E/EGL_emulation: eglQueryContext 32c0  EGL_BAD_ATTRIBUTE
E/EGL_emulation: tid 23192: eglQueryContext(1772): error 0x3004 (EGL_BAD_ATTRIBUTE)
E/ACodec: [OMX.google.h264.decoder] setPortMode on output to DynamicANWBuffer failed w/ err -1010

HTML page displayed in the WebView:

<html>
<head>
</head>
<body>
<video controls autoplay>
    <source src="https://www...*.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
</body>
</html>

Basic application content:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = findViewById(R.id.webView);
        webView.loadUrl("https://www...");
    }
}

My attempts include setting custom webview, webchrome client as well as enabling/ disabling custom settings.

webView.setWebChromeClient(new MyWebChromeClient());
webView.setWebViewClient(new MyWebViewClient(activity));

webView.clearCache(true);
webView.clearHistory();
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true); // Seems to be required to support HTTPS
webSettings.setAllowFileAccess(true);
//Enabling zoom-in controls
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);

webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

In the manifest:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

With attempts

android:hardwareAccelerated="true"/ "false"

Any help where to dig in further would be much appreciated.enter image description here

Solution

  • Apparently, the video size could not be calculated by the web engine anymore. It was then rendered with width and height of zero.

    This can be fixed by assigning a width to the <video> tag:

    <video controls autoplay style="width:100px;">
    <source src="https://www...*.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

    Or

    <div style="width:100%; height:100%;">
  <video controls autoplay>
    <source src="https://www...*.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>