Android webview全屏播放html5的视频

[谭文伟]

转载请标明转载处：http://bbs.csdn.net/topics/390839259

本人刚学android，菜鸟一个，第一次写帖子，最近因为项目要用webview加载html5的视频，开始不能全屏播，做了很久才做出来！那按我的理解说下怎么实现全屏吧。
首先写布局文件activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <FrameLayout 
        android:id="@+id/video_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone"
        ></FrameLayout>
    <Button 
        android:id="@+id/video_landport"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="全屏不显示该按扭，点击切换横屏"
        android:gravity="center"
        />
    <WebView 
        android:id="@+id/video_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    </LinearLayout>

原理：实现全屏的时候把webview里的视频放到一个View（布局里的video_view控件）里面，然后把webview隐藏掉！这样就实现了全屏播放的！
现在具体来看看怎么实现的:
先放代码MainActivity.java：

public class MainActivity extends Activity {

	private FrameLayout videoview;// 全屏时视频加载view
	private Button videolandport;
	private WebView videowebview;
	private Boolean islandport = true;//true表示此时是竖屏，false表示此时横屏。
	private View xCustomView;
	private xWebChromeClient xwebchromeclient;
	private String url = "http://look.appjx.cn/mobile_api.php?mod=news&id=12604";
	private WebChromeClient.CustomViewCallback 	xCustomViewCallback;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉应用标题
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
	            WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.activity_main);
		initwidget();
		initListener();
		videowebview.loadUrl(url);
	}

	private void initListener() {
		// TODO Auto-generated method stub
		videolandport.setOnClickListener(new Listener());
	}

	private void initwidget() {
		// TODO Auto-generated method stub
		videoview = (FrameLayout) findViewById(R.id.video_view);
		videolandport = (Button) findViewById(R.id.video_landport);
		videowebview = (WebView) findViewById(R.id.video_webview);
		WebSettings ws = videowebview.getSettings();
		/**
		 * setAllowFileAccess 启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像
		 * setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式
		 * setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置在解码时使用的默认编码
		 * setFixedFontFamily 设置固定使用的字体 setJavaSciptEnabled 设置是否支持Javascript
		 * setLayoutAlgorithm 设置布局方式 setLightTouchEnabled 设置用鼠标激活被选项
		 * setSupportZoom 设置是否支持变焦
		 * */
		ws.setBuiltInZoomControls(true);// 隐藏缩放按钮
		ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);// 排版适应屏幕
		ws.setUseWideViewPort(true);// 可任意比例缩放
		ws.setLoadWithOverviewMode(true);// setUseWideViewPort方法设置webview推荐使用的窗口。setLoadWithOverviewMode方法是设置webview加载的页面的模式。
		ws.setSavePassword(true);
		ws.setSaveFormData(true);// 保存表单数据
		ws.setJavaScriptEnabled(true);
		ws.setGeolocationEnabled(true);// 启用地理定位
		ws.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");// 设置定位的数据库路径
		ws.setDomStorageEnabled(true);
		xwebchromeclient = new xWebChromeClient();
		videowebview.setWebChromeClient(xwebchromeclient);
		videowebview.setWebViewClient(new xWebViewClientent());
	}

	class Listener implements OnClickListener {
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()) {
			case R.id.video_landport:
				if (islandport) {
					setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
					videolandport.setText("全屏不显示该按扭，点击切换横屏");
				}else {
					setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 
					videolandport.setText("全屏不显示该按扭，点击切换竖屏");
				}
				break;
			default:
				break;
			}
		}
	}
	   @Override
	    public boolean onKeyDown(int keyCode, KeyEvent event) {
	    	if (keyCode == KeyEvent.KEYCODE_BACK) {
	            if (inCustomView()) {
	            	hideCustomView();
	            	return true;
	            }else {
		   	 videowebview.loadUrl("about:blank");
//		       	 mTestWebView.loadData("", "text/html; charset=UTF-8", null);
		   	 MainActivity.this.finish();
		       	 Log.i("testwebview", "===>>>2");
			}
	    	}
	    	return true;
	    }
	   /**
	    * 判断是否是全屏
	    * @return
	    */
	    public boolean inCustomView() {
	 		return (xCustomView != null);
	 	}
	     /**
	      * 全屏时按返加键执行退出全屏方法
	      */
	     public void hideCustomView() {
	    	 xwebchromeclient.onHideCustomView();
	 	}
	/**
	 * 处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
	 * @author
	 */
	public class xWebChromeClient extends WebChromeClient {
		private Bitmap xdefaltvideo;
		private View xprogressvideo;
		@Override
    	//播放网络视频时全屏会被调用的方法
		public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
		{
			if (islandport) {
			}
			else{
				
//				ii = "1";
//				setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); 
			}
			setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 
	        videowebview.setVisibility(View.GONE);
	        //如果一个视图已经存在，那么立刻终止并新建一个
	        if (xCustomView != null) {
	            callback.onCustomViewHidden();
	            return;
	        }	        
	        videoview.addView(view);
	        xCustomView = view;
	        xCustomViewCallback = callback;
	        videoview.setVisibility(View.VISIBLE);
		}
		
		@Override
		//视频播放退出全屏会被调用的
		public void onHideCustomView() {
			
			if (xCustomView == null)//不是全屏播放状态
				return;	       			
			// Hide the custom view.
			setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); 
			xCustomView.setVisibility(View.GONE);
			
			// Remove the custom view from its container.
			videoview.removeView(xCustomView);
			xCustomView = null;
			videoview.setVisibility(View.GONE);
			xCustomViewCallback.onCustomViewHidden();
			
			videowebview.setVisibility(View.VISIBLE);
			
	        //Log.i(LOGTAG, "set it to webVew");
		}
		//视频加载添加默认图标
		@Override
		public Bitmap getDefaultVideoPoster() {
			//Log.i(LOGTAG, "here in on getDefaultVideoPoster");	
			if (xdefaltvideo == null) {
				xdefaltvideo = BitmapFactory.decodeResource(
						getResources(), R.drawable.videoicon);
		    }
			return xdefaltvideo;
		}
		//视频加载时进程loading
		@Override
		public View getVideoLoadingProgressView() {
			//Log.i(LOGTAG, "here in on getVideoLoadingPregressView");
			
	        if (xprogressvideo == null) {
	            LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
	            xprogressvideo = inflater.inflate(R.layout.video_loading_progress, null);
	        }
	        return xprogressvideo; 
		}
    	//网页标题
    	 @Override
         public void onReceivedTitle(WebView view, String title) {
            (MainActivity.this).setTitle(title);
         }

//         @Override
//       //当WebView进度改变时更新窗口进度
//         public void onProgressChanged(WebView view, int newProgress) {
//        	 (MainActivity.this).getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress*100);
//         }      
	}
	/**
	 * 处理各种通知、请求等事件
	 * @author
	 */
	public class xWebViewClientent extends WebViewClient {
		 @Override
		    public boolean shouldOverrideUrlLoading(WebView view, String url) {
		    	Log.i("webviewtest", "shouldOverrideUrlLoading: "+url);
		        return false;
		    }
	}
	/**
	 * 当横竖屏切换时会调用该方法
	 * @author
	 */
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
    	Log.i("testwebview", "=====<<<  onConfigurationChanged  >>>=====");
         super.onConfigurationChanged(newConfig);
         
         if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE){
             Log.i("webview", "   现在是横屏1");
             islandport = false;
            }else if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
             Log.i("webview", "   现在是竖屏1");
             islandport = true;
            }
    }
}

代码里面我写了好多注释，相信大家都能看得懂，当然本人是菜鸟，可能有些地方理解错了！知道的可以跟我说。然后我在里面加了一个功能，就是点击webview上面按钮切换横竖屏！还有就是当点击全屏播放的时候强制横屏全屏播放，点击返回时回到竖屏！我这里没有用手机重力感应切换横竖屏！代码里面还加了个播放进度的布局文件，大家在源码里可以看到！
最后说下AndroidManifest.xml设置;
访问网络权限加上这句
<uses-permission android:name="android.permission.INTERNET"/>
当切换横竖屏时为了不重新调用onCreate等方法，要加个这句：
android:configChanges="orientation|keyboardHidden|screenSize"
差不多这样就可以实现全屏播放了，如果有看不懂的问题可以问我，
源码下载地址：http://download.csdn.net/download/ysjyygywfn/7657933

[从此程序员]

楼主的讲解很详细，学习了。

[wl14340714556]

我想问一下对于优酷，腾讯，土豆，56网的视频，android使用webView把各大网站的视频通过iframe嵌入进行播放，我参照你这篇文章是可以实现全屏播放，但是我遇到了一个奇怪的问题：视频先播放，然后在全屏，程序没问题；但如果先全屏后播放，程序报错并且退出应用。 对于这个问题，我也尝试解决过，发现在android 在不同手机版本，在 onShowCustomView方法中的参数view是不同的。我尝试过如下解决方法，但错误依然存在，所以，我想请教以下大神！ FrameLayout frameLayout = (FrameLayout) view; View focusedChild = frameLayout.getFocusedChild(); if (focusedChild instanceof VideoView){ // VideoView (typically API level <11) System.out.print("VideoView"); }else{ // HTML5VideoFullScreen (typically API level 11+) // Handle HTML5 video ended event if (webview != null && webview.getSettings().getJavaScriptEnabled()){ // Run javascript code that detects the video end and notifies the interface String js = "javascript:"; js += "_ytrp_html5_video = document.getElementsByTagName('video')[0];"; js += "if (_ytrp_html5_video !== undefined) {"; { js += "function _ytrp_html5_video_ended() {"; { js += "_ytrp_html5_video.removeEventListener('ended', _ytrp_html5_video_ended);"; js += "_VideoEnabledWebView.notifyVideoEnd();"; // Must match Javascript interface name and method of VideoEnableWebView } js += "}"; js += "_ytrp_html5_video.addEventListener('ended', _ytrp_html5_video_ended);"; } js += "}"; webview.loadUrl(js); } }

[iloveaman]

视频先播放，然后在全屏，程序没问题；但如果先全屏后播放，程序报错并且退出应用。 我也发现了这个问题，请问你解决了吗？？

[awayfly]

楼主，怎么又的手机抛空 有的手机又能全屏 啊？什么情况。。。都纠结好几天了 怎么播放优酷上的视频

[doubi0511doubi]

我用webView播放视频还遇到一个问题：就是没有办法调节视频音量的大小.不知楼主可解决这个问题

[liutao2515865]

怎么在优酷等视频播放器中的控件实现全屏切换啊？

[duangjing]

写的好，很详细

[cocoa_shi]

根据这个方法，可以实现全屏，但是我退出全屏之后，再点击全屏那个按钮就不起作用了，求答案

[jsp_will]

Android 4.4 以上的可以用吗

[Melody_ssdut]

学习了，可以全屏，再次全屏也没问题

[qq_24149589]

运行楼主的代码 不能实现全屏 用小米2手机测试

[w294785608]

华为4.4根本不能全屏，只有4.4以下的全屏，现在手机基本都是4.0以上的，这不能全屏的概率太大啦，根本不走showview

[mm0609]

引用 5 楼 doubi0511doubi 的回复:

我用webView播放视频还遇到一个问题：就是没有办法调节视频音量的大小.不知楼主可解决这个问题

我也遇到了知道这个问题，请问您解决了吗

[kiruma]

引用 12 楼 w294785608 的回复:

华为4.4根本不能全屏，只有4.4以下的全屏，现在手机基本都是4.0以上的，这不能全屏的概率太大啦，根本不走showview

我三星5.0的都行，不过放在安卓机顶盒（4.2.2）就不行了，会白屏

[csh159]

点击没反应是什么情况啊

[Fred__Kang]

不管用，4.3 vs 6.0