android webview自动播放Video

由于近期有个需求需要在webview加载完网页上的视频标签(html5 video)，经过一番查资料和尝试之后，终于实现了，具体实现如下：自定义一个xml 里面包含Webview组件，自定义WebViewClient，实现onPageFinished方法，回调javascript，实现播放功能

package com.zr.webviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;

import com.samsung.zr.webviewtest.R;

public class MainActivity extends Activity {
	
	private FrameLayout frameLayout = null;
	private WebView webView = null;
	private WebChromeClient chromeClient = null;
	private View myView = null;
	private WebChromeClient.CustomViewCallback myCallBack = null;
	
	
	public MainActivity() {
	}
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		setContentView(R.layout.activity_main);
		
		frameLayout = (FrameLayout)findViewById(R.id.framelayout);
		webView = (WebView)findViewById(R.id.webview);
		
		webView.getSettings().setJavaScriptEnabled(true);
		webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
		
		
		webView.setWebViewClient(new MyWebviewCient());
		
		chromeClient = new MyChromeClient();
		
		webView.setWebChromeClient(chromeClient);
		webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
		webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

		webView.setHorizontalScrollBarEnabled(false);
		webView.setVerticalScrollBarEnabled(false);	
		
		final String USER_AGENT_STRING = webView.getSettings().getUserAgentString() + " Rong/2.0";
		webView.getSettings().setUserAgentString( USER_AGENT_STRING );
		webView.getSettings().setSupportZoom(false);
		webView.getSettings().setPluginState(WebSettings.PluginState.ON);
		webView.getSettings().setLoadWithOverviewMode(true);
		
		webView.loadUrl("file:///android_asset/index.html");
		
		if(savedInstanceState != null){
			webView.restoreState(savedInstanceState);
		}
		
	}
	
	@Override
	public void onBackPressed() {
		if(myView == null){
			super.onBackPressed();
		}
		else{
			chromeClient.onHideCustomView();
		}
	}
	
	@Override
	protected void onSaveInstanceState(Bundle outState) {
		// TODO Auto-generated method stub
		webView.saveState(outState);
	}
	
	public void addJavaScriptMap(Object obj, String objName){
		webView.addJavascriptInterface(obj, objName);
	}
	
	public class MyWebviewCient extends WebViewClient{
		@Override
		public WebResourceResponse shouldInterceptRequest(WebView view,
				String url) {
			WebResourceResponse response = null;
			response = super.shouldInterceptRequest(view, url);
			return response;
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			// TODO Auto-generated method stub
			super.onPageFinished(view, url);
			Log.d("dream", "***on page finished");
			webView.loadUrl("javascript:myFunction()"); 
		}
		
	}
	
	public class MyChromeClient extends WebChromeClient{
		
		@Override
		public void onShowCustomView(View view, CustomViewCallback callback) {
			if(myView != null){
				callback.onCustomViewHidden();
				return;
			}
			frameLayout.removeView(webView);
			frameLayout.addView(view);
			myView = view;
			myCallBack = callback;
		}
		
		@Override
		public void onHideCustomView() {
			if(myView == null){
				return;
			}
			frameLayout.removeView(myView);
			myView = null;
			frameLayout.addView(webView);
			myCallBack.onCustomViewHidden();
		}
		
		@Override
		public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
			// TODO Auto-generated method stub
			Log.d("ZR", consoleMessage.message()+" at "+consoleMessage.sourceId()+":"+consoleMessage.lineNumber());
			return super.onConsoleMessage(consoleMessage);
		}
	}
	
}

XML布局文件：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

网页文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>FamilyAlbum</title>
    
	<link rel="stylesheet" type="text/css" href="css/main.css"  media="all"/>

    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"> </script>
    <script type="text/javascript" src="lib/jquery-ui-1.8.23.custom.min.js"> </script>
    <script type="text/javascript" src="lib/jquery.confirm.js"> </script>      
    <script type="text/javascript" src="js/main.js"> </script>
    
<script type="text/javascript">
	function myFunction()
	{
		//document.getElementById("demo").innerHTML="My First JavaScript Function";
		var videos = document.getElementById('videoTag'); 
		videos.loop = 'loop';
		videos.play();
		
	}
</script>
</head>

<body>
    <video id="videoTag" src="file:///storage/emulated/0/big_buck_bunny.mp4" controls="controls" height="210px" width="380px"></video>

<button type="button" οnclick="myFunction()">点击这里</button>

<p id="demo">A Paragraph.</p>

</body>
</html>

源码下载地址： http://download.csdn.net/detail/xiangyong2008/7473159