Android使用WebView實現全屏切換播放網頁視頻功能

這篇文章主要介紹了Android使用WebView實現全屏切換播放網頁視頻功能,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

首先寫佈局文件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;
      }
  }
}

  最後說下AndroidManifest.xml設置;
訪問網絡權限加上這句

<uses-permission android:name="android.permission.INTERNET"/>

當切換橫豎屏時爲了不重新調用onCreate等方法,要加個這句:

android:configChanges="orientation|keyboardHidden|screenSize"

總結

以上所述是小編給大家介紹的Android使用WebView實現全屏切換播放網頁視頻功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章