WebView & amp; HTML5 ----- use WebView to play HTML5 video files, ioswebview

WebView & HTML5 ----- use WebView to play HTML5 video files, ioswebview

I. Problem Description

HTML5 provides many new features, such as video playback, Local web storage, geographic location, application caching, and Canvas. However, these features require the support of browsers, in Android applications, we can use WebView to build Web applications and provide support for HTML5 technology. The WebView component can load WebViewClient and WebChromeClient through setWebChromeClient () and setWebViewClient.

WebViewClientMainly helps WebView process various notifications and request events
WebChromeClientMainly assists WebView in processing Javascript dialogs, website icons, website titles, loading progress, etc.
WebSetingUse this component to configure the browser, such as setting support for javascript scripts, allowing access to files, scaling control buttons, and scaling.

The following describes how to use WebView to play HTML5 video files.

Ii. Code Implementation

1. Write HTML5WebView and rewrite 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"; privat E void init (Context context) {mContext = context; Activity a = (Activity) mContext; mLayout = new FrameLayout (context); mBrowserFrameLayout = (FrameLayout) LayoutInflater. from (). inflate (R. layout. custom_screen, null); mContentView = (FrameLayout) mBrowserFrameLayout. findViewById (R. id. main_content); mCustomViewContainer = (FrameLayout) mBrowserFrameLayout. findViewById (R. id. fullscreen_custom_cont Ent); mLayout. addView (progress, progress); mWebChromeClient = new MyWebChromeClient (); setWebChromeClient (mWebChromeClient); setWebViewClient (new MyWebViewClient (); // configure webview WebSettings s = getSettings (); s. setBuiltInZoomControls (true); // You can scale s. setLayoutAlgorithm (WebSettings. layoutAlgorithm. NARROW_COLUMNS); s. setUseWideViewPort (true); // you can set this attribute to scale s in any proportion. setLoadWithOvervie WMode (true); s. setSaveFormData (true); s. setJavaScriptEnabled (true); // supports js s. setGeolocationEnabled (true); s. setGeolocationDatabasePath ("/data/com.jereh.html 5 webview/databases/"); s. setDomStorageEnabled (true); mContentView. addView (this);} public HTML5WebView (Context context) {super (context); init (context);} public HTML5WebView (Context context, AttributeSet attrs) {super (context, attrs); ini T (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 mdefavidevideoposter; private View mVideoProgressView; // Android enables WebView to support HTML5 Video (full screen) playback @ 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 getdefavidevideoposter () {if (mDefaultVideoPoster = null) {mdefavidevideoposter = BitmapFactory. decodeResource (getResources (), R. drawable. default_video_poster);} return mdefavidevideoposter;} @ 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 );}

2. Write Activity and test the application

Public class TestHTML5WebView extends Activity {HTML5WebView mWebView; @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (Inline); mWebView = new HTML5WebView (this); if (savedInstanceState! = Null) {mWebView. restoreState (savedInstanceState);} else {mWebView. loadUrl ("HTML5 page containing Video tags");} 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. layout files

1. 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>

2. 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>

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
Copyright Disclaimer: The copyright of this article is shared by Yantai jereh Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the consent of the author and provide the original article connection clearly on the article page, otherwise, you are entitled to pursue legal liability.
Technical Consultation: