Android webview加载html5网络视频全屏播放

转载请标明转载处：http://blog.csdn.net/ysjyygywfn/article/details/38084687

本人刚学android，菜鸟一个，第一次写帖子，开始不知道有博客，这次把帖子发到博客来。最近因为项目要用webview加载html5的视频，开始不能全屏播，做了很久才做出来！那按我的理解说下怎么实现全屏吧。

首先写布局文件activity_main.xml：

XML/HTML code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

< 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：

Java code ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217

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(); 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 ; } public boolean inCustomView() { return (xCustomView !=  null ); } public void hideCustomView() { xwebchromeclient.onHideCustomView(); } 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); //         }       } public class xWebViewClientent  extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.i( "webviewtest" ,  "shouldOverrideUrlLoading: " +url); return false ; } } @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/detail/ysjyygywfn/7828911