Mobile Player Problem - webview app

Question

I created an app on webView and its player only works when we press the play button 3 times ( one to play the video, then pause and then press again it plays the video )

the app link to demonstrate the error: https://drive.google.com/open?id=0B3xCH5qpmt1vVHl1enhkSVJrYjQ

However the error is only in the mobile, it works perfectly on the pc. THE PAGE IS THAT: http://pipocaplayfm.com/mobile-play/

The code of the webview - MainActivity.java:

package com.creator.music;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Handler;
import android.view.View;
import android.view.Window;
import android.view.animation.TranslateAnimation;
import android.webkit.WebSettings;
import android.webkit.WebSettings.RenderPriority;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
import android.widget.Toast;


public class MainActivity extends Activity {

    // set your custom url here
    String url = " http://EU INSIRO A URL AKI";
    boolean doubleBackToExitPressedOnce = false;

    // if you want to show progress bar on splash screen
    Boolean showProgressOnSplashScreen = true;

    WebView mWebView;
    ProgressBar prgs;
    RelativeLayout splash, main_layout;


    @SuppressWarnings("deprecation")
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        getWindow().setFeatureInt(Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);
        mWebView = (WebView) findViewById(R.id.wv);
        prgs = (ProgressBar) findViewById(R.id.progressBar);
        main_layout = (RelativeLayout) findViewById(R.id.main_layout);

        // splash screen View

        if (!showProgressOnSplashScreen)
            ((ProgressBar) findViewById(R.id.progressBarSplash)).setVisibility(View.GONE);
        splash = (RelativeLayout) findViewById(R.id.splash);

//      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//
//          // get status bar height to push webview below that
//          int result = 0;
//          int resourceId = getResources().getIdentifier("status_bar_height",
//                  "dimen", "android");
//          if (resourceId > 0) {
//              result = getResources().getDimensionPixelSize(resourceId);
//          }
//
//          // set top padding to status bar
//          main_layout.setPadding(0, result, 0, 0);
//      }

        ConnectivityManager cm = (ConnectivityManager) this.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetwork = cm.getActiveNetworkInfo();
        if (activeNetwork != null && activeNetwork.isConnected()) {

            mWebView.loadUrl(url);
            Toast.makeText(this,"Recommended to use 3G/4G or Wifi ",Toast.LENGTH_LONG).show();
            // control javaScript and add html5 features
            mWebView.setFocusable(true);
            mWebView.setFocusableInTouchMode(true);
            mWebView.getSettings().setJavaScriptEnabled(true);
            mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
            mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
            mWebView.getSettings().setDomStorageEnabled(true);
            mWebView.getSettings().setAppCacheEnabled(true);
            mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
            mWebView.getSettings().setDatabaseEnabled(true);
            mWebView.getSettings().setDatabasePath(
                    this.getFilesDir().getPath() + this.getPackageName()
                            + "/databases/");

            // this force use chromeWebClient
            mWebView.getSettings().setSupportMultipleWindows(true);


            mWebView.setWebViewClient(new WebViewClient() {

                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return false;
                }

                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                    if (prgs.getVisibility() == View.GONE) {
                        prgs.setVisibility(View.VISIBLE);
                    }
                }

                @Override
                public void onLoadResource(WebView view, String url) {
                    super.onLoadResource(view, url);
                }

                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);

                    if (prgs.getVisibility() == View.VISIBLE)
                        prgs.setVisibility(View.GONE);

                    // check if splash is still there, get it away!
                    if (splash.getVisibility() == View.VISIBLE)
                        splash.setVisibility(View.GONE);
                    slideToBottom(splash);

                }

            });

        }
        else{

            //Toast.makeText(this,"Your Device is not connected to Internet , Please Turn ON Data Services",Toast.LENGTH_LONG).show();

            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            builder.setTitle("Error");
            builder.setMessage("No Network Connection").setCancelable(false)
                    .setIcon(R.drawable.logo)
                    .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int id) {
                            finish();
                        }
                    });
            AlertDialog alert = builder.create();
            alert.show();

            Toast.makeText(this,"Your Device is not connected to Internet , Recommended to use 3G/4G or Wifi ",Toast.LENGTH_LONG).show();

        }

    }




    /**
     * To animate view slide out from top to bottom
     *
     *
     */
    void slideToBottom(View view) {
        TranslateAnimation animate = new TranslateAnimation(0, 0, 0,
                view.getHeight());
        animate.setDuration(2000);
        animate.setFillAfter(true);
        view.startAnimation(animate);
        view.setVisibility(View.GONE);
    }

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

        this.doubleBackToExitPressedOnce = true;
        Toast.makeText(this, "Please click BACK again to exit", Toast.LENGTH_SHORT).show();

        new Handler().postDelayed(new Runnable() {

            @Override
            public void run() {
                doubleBackToExitPressedOnce=false;
            }
        }, 2000);
    }

}

'

Answer 1

Both in webview and in mobile browsers, sound cannot be started automatically, it needs a user action to start playing, like pressing a button for example. So, what you have to fix in your javascript is so it doesn’t touch automatically (this function will only work if you use a PC). So the user will open the page, click on the play and work. If autoplay is enabled, the user will have to click to pause and then click again to start playing, generating the situation of your current problem.