WebView&HTML5-----使用WebView播放HTML5視頻文件

1、問題描述

　　HTML5提供了不少新的特性好比，視頻播放、web本地存儲、地理定位、應用緩存、Canvas等，但這些特性須要瀏覽器的支持，在Android應用中咱們可使用WebView構建Web應用，提供對HTML5技術的支持，WebView組件能夠經過  setWebChromeClient()和setWebViewClient()加載WebViewClient與WebChromeClient。

WebViewClient主要幫助WebView處理各類通知、請求事件的

WebChromeClient主要輔助WebView處理Javascript的對話框、網站圖標、網站title、加載進度等

WebSeting經過該組件實現對瀏覽器的配置，如設置支持javascript腳本 、容許訪問文件 、縮放控制按鈕、支持縮放 等

　　下面就使用WebView播放HTML5的視頻文件，效果如圖

2、代碼實現

一、編寫HTML5WebView，重寫WebView

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";
    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());
        //配置webview 
        WebSettings s = getSettings();
        s.setBuiltInZoomControls(true);//設置支持縮放 
        s.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        s.setUseWideViewPort(true);//設置此屬性，可任意比例縮放
        s.setLoadWithOverviewMode(true);
        s.setSaveFormData(true);
        s.setJavaScriptEnabled(true);//支持js
        s.setGeolocationEnabled(true);
        s.setGeolocationDatabasePath("/data/data/com.jereh.html5webview/databases/");
        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;
         // Android 使WebView支持HTML5 Video（全屏）播放的方法
        @Override
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback
                callback){
            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);
        }
        
        @Override
        public Bitmap getDefaultVideoPoster() {
            if (mDefaultVideoPoster == null) {
                mDefaultVideoPoster = BitmapFactory.decodeResource(
                        getResources(), R.drawable.default_video_poster);
            }
            return mDefaultVideoPoster;
        }
        @Override
        public View getVideoLoadingProgressView() {
            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) {
               return false;
        }
    }
    static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS =
        new FrameLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
}

二、編寫Activity，測試應用

public class TestHTML5WebView extends Activity {
    HTML5WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebView = new HTML5WebView(this);
        
        if (savedInstanceState != null) {
            mWebView.restoreState(savedInstanceState);
        } else {
            mWebView.loadUrl("含有視頻的Video標籤的HTML5的頁面");
            
        }   
        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);
    }
}

3、佈局文件

一、  custom_screen.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android">
    <FrameLayout android:id="@+id/fullscreen_custom_content"
        android:visibility="gone"
        android:background="@color/black"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />
    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout android:id="@+id/error_console"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
        />
        <FrameLayout android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        />
    </LinearLayout>
</FrameLayout>

二、video_loading_progress.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/progress_indicator"
         android:orientation="vertical"
         android:layout_centerInParent="true"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
       <ProgressBar android:id="@android:id/progress"
           style="?android:attr/progressBarStyleLarge"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
       <TextView android:paddingTop="5dip"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:text="@string/loading_video" android:textSize="14sp"
           android:textColor="?android:attr/textColorPrimary" />
 </LinearLayout>

 

做者：傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
版權聲明：本文版權歸煙 臺 傑瑞教育 科 技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
技術諮詢：