html video not playing in android webview

Question

i am working with android webview and here i stucked with the videos .Actually i am trying to play a video that is in asset folder but its not playing. Here i have gone through all the links and solutions but nothing is working for me like-

[link1][1] https://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/TestHTML5WebView.java

and

[link2][2] http://www.mocoven.com/blog/?p=199

and below i am attaching the code-

//Html5webview

package com.example.jbb_video_play;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;

public class HTML5WebView extends WebView {

        private Context mContext;                                                
        private MyWebChromeClient mWebChromeClient;                                      
        private View mCustomView;                                                            
        private FrameLayout mCustomViewContainer;                                                   
        private WebChromeClient.CustomViewCallback mCustomViewCallback;

        private FrameLayout mContentView;                                                  
        private FrameLayout mBrowserFrameLayout;                                                     
        private FrameLayout mLayout;                                                    

    static final String LOGTAG = "HTML5WebView";

        @SuppressLint("NewApi")
        private void init(Context context) {
                mContext = context;            
                Activity a = (Activity) mContext;

                mLayout = new FrameLayout(context);

                mBrowserFrameLayout = (FrameLayout) LayoutInflater.from(a).inflate(R.layout.custom_screen, null);
                mContentView = (FrameLayout) mBrowserFrameLayout.findViewById(R.id.main_content);
                mCustomViewContainer = (FrameLayout) mBrowserFrameLayout.findViewById(R.id.fullscreen_custom_content);

                mLayout.addView(mBrowserFrameLayout, COVER_SCREEN_PARAMS);

                mWebChromeClient = new MyWebChromeClient();
            setWebChromeClient(mWebChromeClient);

            setWebViewClient(new MyWebViewClient());

            // Configure the webview
            WebSettings s = getSettings();
            s.setBuiltInZoomControls(true);
            s.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
            s.setUseWideViewPort(true);
            s.setAllowContentAccess(true);
            s.setAllowFileAccess(true);
            s.setAllowUniversalAccessFromFileURLs(true);
            s.setAllowFileAccessFromFileURLs(true);
            s.setMediaPlaybackRequiresUserGesture(true);
            s.setNeedInitialFocus(true);
            s.setSaveFormData(true);
            s.setUserAgentString(getUrl());
            s.setLoadsImagesAutomatically(true);
            s.setBlockNetworkLoads(false);
            s.setBlockNetworkImage(false);
            s.setDatabaseEnabled(true);
            s.setJavaScriptCanOpenWindowsAutomatically(true);
            s.setJavaScriptEnabled(true);
            s.setSupportMultipleWindows(true);
            s.setLoadWithOverviewMode(true);
            s.setSavePassword(true);
            s.setSaveFormData(true);
            s.setJavaScriptEnabled(true);

            // enable navigator.geolocation
            s.setGeolocationEnabled(true);
           // s.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");

            // enable Web Storage: localStorage, sessionStorage
            s.setDomStorageEnabled(true);

            mContentView.addView(this);
        }

        public HTML5WebView(Context context) {
                super(context);
                init(context);
        }

        public HTML5WebView(Context context, AttributeSet attrs) {
                super(context, attrs);
                init(context);
        }

        public HTML5WebView(Context context, AttributeSet attrs, int defStyle) {
                super(context, attrs, defStyle);
                init(context);
        }

        public FrameLayout getLayout() {
                return mLayout;
        }

    public boolean inCustomView() {
                return (mCustomView != null);
        }

    public void hideCustomView() {
                mWebChromeClient.onHideCustomView();
        }

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

    private class MyWebChromeClient extends WebChromeClient {
                private Bitmap          mDefaultVideoPoster;
                private View            mVideoProgressView;

        @Override
                public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
                {
                        //Log.i(LOGTAG, "here in on ShowCustomView");
                HTML5WebView.this.setVisibility(View.GONE);

                // if a view already exists then immediately terminate the new one
                if (mCustomView != null) {
                    callback.onCustomViewHidden();
                    return;
                }

                mCustomViewContainer.addView(view);
                mCustomView = view;
                mCustomViewCallback = callback;
                mCustomViewContainer.setVisibility(View.VISIBLE);
                }

                @Override
                public void onHideCustomView() {

                        if (mCustomView == null)
                                return;        

                        // Hide the custom view.
                        mCustomView.setVisibility(View.GONE);

                        // Remove the custom view from its container.
                        mCustomViewContainer.removeView(mCustomView);
                        mCustomView = null;
                        mCustomViewContainer.setVisibility(View.GONE);
                        mCustomViewCallback.onCustomViewHidden();

                        HTML5WebView.this.setVisibility(View.VISIBLE);

                //Log.i(LOGTAG, "set it to webVew");
                }

                @Override
                public Bitmap getDefaultVideoPoster() {
                        //Log.i(LOGTAG, "here in on getDefaultVideoPoster");    
                        if (mDefaultVideoPoster == null) {
                                mDefaultVideoPoster = BitmapFactory.decodeResource(
                                                getResources(), R.drawable.ic_launcher);
                    }
                        return mDefaultVideoPoster;
                }

                @Override
                public View getVideoLoadingProgressView() {
                        //Log.i(LOGTAG, "here in on getVideoLoadingPregressView");

                if (mVideoProgressView == null) {
                    LayoutInflater inflater = LayoutInflater.from(mContext);
                    mVideoProgressView = inflater.inflate(R.layout.video_loading_progress, null);
                }
                return mVideoProgressView;
                }

         @Override
         public void onReceivedTitle(WebView view, String title) {
            ((Activity) mContext).setTitle(title);
         }

         @Override
         public void onProgressChanged(WebView view, int newProgress) {
                 ((Activity) mContext).getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress*100);
         }

         @Override
         public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
             callback.invoke(origin, true, false);
         }
    }

        private class MyWebViewClient extends WebViewClient {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i(LOGTAG, "shouldOverrideUrlLoading: "+url);
                // don't override URL so that stuff within iframe can work properly
                // view.loadUrl(url);
                return false;
            }
        }

        static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS =
        new FrameLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
}

and //MainActivity

public class MainActivity extends Activity {

    HTML5WebView mWebView;

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

       if (savedInstanceState != null) {
               mWebView.restoreState(savedInstanceState);
       } else {


           try
        {
        AssetManager m=this.getAssets();
        InputStream ios=    m.open("nasa.html");
        BufferedReader br=new BufferedReader(new InputStreamReader(ios));

        StringBuffer nb=new StringBuffer();
        String line="";

        while((line=br.readLine())!=null)
        {
            nb.append(line);
        }

        String final_data=nb.toString();

        //mWebView.loadDataWithBaseURL("file:///android_asset/", final_data, "text/html", "utf-8", null);


              // mWebView.loadUrl("http://freebsd.csie.nctu.edu.tw/~freedom/html5/");
               mWebView.loadUrl("file:///android_asset/nasa.html");

        }
           catch (Exception e) {
            // TODO: handle exception
        }
       }
       setContentView(mWebView.getLayout());
   }




    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mWebView.saveState(outState);
    }

    @Override
    public void onStop() {
        super.onStop();
        mWebView.stopLoading();
    }

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

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
         super.onConfigurationChanged(newConfig);
    }

}

//html file in asset folder

<!DOCTYPE html>
<head></head>

<body>
<video id="video" height="240" width="360" controls="controls" >
<source src="clipcanvas_14348_offline.mp4" type="video/mp4">
</video>

</body>

<footer>
</footer>

and link of video

http://www.clipcanvas.com/a/video-clip-downloads/

please suggest me any workable solution,thanks

Solution 1

It happens when video is in a div, you should add these lines in your code:

    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setAppCacheEnabled(true);
    webView.getSettings().setAppCachePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/cache");
    webView.getSettings().setDatabaseEnabled(true);
    webView.getSettings().setDatabasePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/databases");

Solution 2

Next to the WebViewClient, you should also add WebChromeClient to the WebView.

webView.setWebViewClient(new MyWebViewClient());               
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);              
webView.loadUrl("http://118.102.182.53:9080/swami/index.html");

For Android version 3.x you can also set hardwareAccelerated="true in the AndroidManifest.xml.

Comments

[Ravi]

here i have to play the file which is placed in local folder

[Max]

Add "webView.getSettings().setMediaPlaybackRequiresUserGesture(f‌​alse);" after "webView.getSettings().setJavaScriptEnabled(true);" to make webview load media automatically

[buzzingsilently]

Does this really helped you?, because I am facing similar kind of issue!

[Samvel Kartashyan]

Yes, it helped me

[deadfish]

For me, only first line helped. I had embeded .html video and it worked.

[Abhinav Pawar]

you save my day

[Praveena]

webView.getSettings().setDomStorageEnabled(true); this line does all the work

[Anant Shah]

Saved my day ++