Vimeo embed showing white screen/missing progressbar

Question

I'm using Vimeo with webview in one of my apps, but in some devices it isn't working very well. On my xaiomi(API-19) it doesn't show the video progressbar and on my S4(API-21) the first time i watch the video it display correctly, but at the second time it shows a white screen, not only on the video i just watch but in all others Vimeos videos that i try to play. Someone knows what i'm doing wrong? or another way that works?. Here's my VimeoPlayer activity.

public class VimeoPlayer extends Activity {
private HTML5WebView mWebView;

private ModelVideo video;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebView = new HTML5WebView(this);

        video = getIntent().getParcelableExtra("video");

        //Auto playing vimeo videos in Android webview
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.getSettings().setAppCacheEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.getSettings().setPluginState(PluginState.OFF);
        mWebView.getSettings().setAllowFileAccess(true);

        String html = "<iframe src=\"https://player.vimeo.com/video/" + video.getVideoUrl() +
                "?title=0&byline=0&portrait=0&color=000000\" width=\"" + mWebView.getWidth() + "\" height=\"" +
                mWebView.getHeight() + "\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\"" +
                "style=\"margin-top:-8px;margin-bottom:-8px;margin-left:-8px;margin-right:-8px;padding:0;width:105%;height:100%;background-color:#000000;\"></iframe>";
        String mime = "text/html";
        String encoding = "utf-8";
        mWebView.loadDataWithBaseURL(null, html, mime, encoding, null);

        setContentView(mWebView.getLayout());

        //Esconder a Status Bar
        View decorView = getWindow().getDecorView();
        // Hide the status bar.
        int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;
        decorView.setSystemUiVisibility(uiOptions);
        // Remember that you should never show the action bar if the
        // status bar is hidden, so hide that too if necessary.
        ActionBar actionBar = getActionBar();
        if(actionBar!=null) {
            actionBar.hide();
        }
    }

    @Override
    public void onPause() {
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mWebView.destroy();
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        mWebView.destroy();
        finish();
    }

  }

Answer 1

I would like to offer a slight alternative approach for you. You have a hardcoded html iframe in your code above, with dynamic snippets. Vimeo provides this html iframe for you with their networking API , it is included on each Video object. An example is included in the ReadMe on how to make the request for the Video, then play it in a WebView. Full disclosure, I am one of the authors of this library.