由于近期有个需求需要在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