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