HTML5 introduced the video element for the purpose of playing videos or movies. HTML5 video is intended to become the new standard way to show video on the web without plugins. Almost all desktop and mobile browsers support the video element. Visit http://caniuse.com/video to check the HTML5 video support on different browsers.
In this post I’m going to explain how to play a HTML5 video in a Android WebView.
This is the test HTML page which has a video element.
<!DOCTYPE html> <html> <body> <video id="video" width="320" height="240" controls> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> </body> </html>
Save this file in the assets folder. In the Android activity load the url into the WebView.
WebView mWebView = (WebView) findViewById(R.id.webView1); mWebView.setWebChromeClient(new WebChromeClient()); mWebView.loadUrl("file:///android_asset/test.html");
You should get the Internet permission in the manifest file.
<uses-permission android:name="android.permission.INTERNET"/>
Run the application and you can view the HTML5 video in the WebView.
The video plays correctly. But the if we click the full screen button it won’t work. We should handle it manually. First change the layout like this.
<FrameLayout android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="300dip" > <WebView android:id="@+id/webView1" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </FrameLayout> <FrameLayout android:id="@+id/target_view" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone"> </FrameLayout>
Then extend the WebChromeClient class and we should override the onShowCustomView and onHideCustomView methods.
class MyChromeClient extends WebChromeClient { @Override public void onShowCustomView(View view, CustomViewCallback callback) { mCustomViewCallback = callback; mTargetView.addView(view); mCustomView = view; mContentView.setVisibility(View.GONE); mTargetView.setVisibility(View.VISIBLE); mTargetView.bringToFront(); } @Override public void onHideCustomView() { if (mCustomView == null) return; mCustomView.setVisibility(View.GONE); mTargetView.removeView(mCustomView); mCustomView = null; mTargetView.setVisibility(View.GONE); mCustomViewCallback.onCustomViewHidden(); mContentView.setVisibility(View.VISIBLE); } }
In the onCreate method, set the custom WebChromeClient to the WebView.
private FrameLayout mTargetView; private FrameLayout mContentView; private CustomViewCallback mCustomViewCallback; private View mCustomView; private MyChromeClient mClient; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView mWebView = (WebView) findViewById(R.id.webView1); mClient = new MyChromeClient(); mWebView.setWebChromeClient(mClient); mWebView.loadUrl("file:///android_asset/test.html"); mContentView = (FrameLayout) findViewById(R.id.main_content); mTargetView = (FrameLayout)findViewById(R.id.target_view); }
Finally override the onBackPressed method of the Activity and exit full screen when back is pressed.
@Override public void onBackPressed(){ if (mCustomView != null){ mClient.onHideCustomView(); }else{ finish(); } }
Now when we run the application, we can go full screen using the button.
Complete Android project can be found here http://www.sendspace.com/file/u1ty03